JavaScript canvas.drawImage alpha丟失

Question

JavaScript的新手。

我正在建立一個將模板圖像與用戶輸入進行比較的站點，並構建一些圖像處理指令。 模板圖像存儲在站點的文件夾中。

 $(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'包含很多半透明的值，這些值永遠不會被獲取：

Answer 1

因此，您嘗試獲取每個像素的Alpha值都不為0或255的整數值嗎？

好吧，您的圖像具有完全透明的像素或純白色/黑色的像素。 因此，您將沒有部分透明的像素。

請參閱下面使用的來自Emojipedia的辣椒表情符號圖像。 約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>

這是僅繪制部分像素的示例。

 $(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>

JavaScript canvas.drawImage alpha丟失

問題描述

1 個解決方案

解決方案1
0 已采納 2018-08-06 14:42:49

JavaScript canvas.drawImage alpha丟失

問題描述

1 個解決方案

解決方案1 0 已采納 2018-08-06 14:42:49

解決方案1
0 已采納 2018-08-06 14:42:49