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 个答案: