JavaScript canvas.drawImage alpha丢失
[英]JavaScript canvas.drawImage alpha loss
问题描述
Pretty new to JavaScript. 
JavaScript的新手。
I'm building a site that compares the template image with the user's input and builds some image processing directives. 我正在建立一个将模板图像与用户输入进行比较的站点，并构建一些图像处理指令。 The template image is stored in the site's folder. 模板图像存储在站点的文件夹中。
$(function() { $("#btnDirective").click(generateEmoteDirectiveFile); }); function generateEmoteDirectiveFile() { getImageData('imgs/templates/human.png'); } function getImageData(source) { var image = new Image(); image.onload = function () { var canvas = document.createElement('canvas'); canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; var ctx = canvas.getContext('2d'); ctx.drawImage(this, 0, 0, canvas.width, canvas.height); var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data; for (var px = 0, cx = canvas.width * canvas.height * 4; px < cx; px += 4) if (data[px+3] != 255 && data[px+3] != 0) console.log("Alpha: " + data[px+3]); }; image.src = source; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="scripts/jquery-1.11.3.min.js"></script> <script src="scripts/script.js"></script> </head> <body> <button id="btnDirective">Generate</button> </body> </html>
'imgs/templates/human.png' contains a lot of semitransparent values, that are never fetched: 'imgs / templates / human.png'包含很多半透明的值，这些值永远不会被获取：
1 个解决方案
解决方案1
0 已采纳 2018-08-06 14:42:49
So you are trying to get the integer values for each pixel where it's alpha value of neither 0 nor 255? 因此，您尝试获取每个像素的Alpha值都不为0或255的整数值吗？
Well, your image has pixels that are either full transparent, or they are solid white/black. 好吧，您的图像具有完全透明的像素或纯白色/黑色的像素。 So you will have no partially-transparent pixels. 因此，您将没有部分透明的像素。
See the image of the chili pepper emoji from Emojipedia that is used below. 请参阅下面使用的来自Emojipedia的辣椒表情符号图像。 Around ~6% of its pixels are partially transparent (around the borders). 约6％的像素是部分透明的（边界附近）。
$(function() { $('#btnDirective').click(generateEmoteDirectiveFile); }); function generateEmoteDirectiveFile() { getImageData('https://i.imgur.com/4LzuX3G.png'); getImageData('https://i.imgur.com/R7g697w.png'); // Using a testable image } function getImageData(source) { var image = new Image(); image.crossOrigin = 'Anonymous'; // This allows Imgur CORS... image.onload = function() { var canvas = document.createElement('canvas'); canvas.width = this.naturalWidth; canvas.height = this.naturalHeight; document.body.appendChild(canvas); // Add canvas to body... var ctx = canvas.getContext('2d'); ctx.drawImage(this, 0, 0, canvas.width, canvas.height); var data = ctx.getImageData(0, 0, canvas.width, canvas.height).data; var pixels = canvas.width * canvas.height; var alphaValues = []; for (var px = 0, cx = pixels * 4; px < cx; px += 4) { if (data[px + 3] != 255 && data[px + 3] != 0) { alphaValues.push(data[px + 3]); } } var nonAlphaPixels = (alphaValues.length / pixels * 100).toFixed(2); console.log('Alpha (' + nonAlphaPixels + '%): ' + alphaValues.join(',')); }; image.src = source; } function drawPartialPixels(imageData) { }
body { background: #444; } #btnDirective { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btnDirective">Generate</button>
Here is an example of drawing only the partial pixels. 这是仅绘制部分像素的示例。
$(function() { $('#btnDirective').click(generateEmoteDirectiveFile); }); function generateEmoteDirectiveFile() { getImageData('https://i.imgur.com/R7g697w.png', onImageLoad); } function getImageData(source, onLoadFn) { var image = new Image(); image.src = source; image.crossOrigin = 'Anonymous'; // This allows Imgur CORS... image.onload = function() { onLoadFn(this); }; } function onImageLoad(image) { var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width = image.naturalWidth; canvas.height = image.naturalHeight; ctx.drawImage(image, 0, 0, canvas.width, canvas.height); var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); var pixels = canvas.width * canvas.height; for (var px = 0, cx = pixels * 4; px < cx; px += 4) { var partialAlpha = imageData.data[px + 3] != 255 && imageData.data[px + 3] != 0; imageData.data[px + 0] = partialAlpha ? 255 : 0; imageData.data[px + 1] = partialAlpha ? 0 : 0; imageData.data[px + 2] = partialAlpha ? 0 : 0; imageData.data[px + 3] = partialAlpha ? 255 : 0; } ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.putImageData(imageData, 0, 0); document.body.appendChild(canvas); // Add canvas to body... }
body { background: #444; } #btnDirective { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="btnDirective">Generate</button>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.