0

我在画布上绘制了 3 张图像并使用此解决方案将它们混合，一切正常，我很高兴，但我想对画布上的像素应用不透明度 - 类似于此方法 - http://www .patrick-wied.at/blog/how-to-create-transparency-in-images-with-html5canvas已经尝试过但没有用。

一旦画布像素应用了不透明度，我就需要在半透明像素下方添加另一个图像，并将整个图像导出为 png。

这是我的图像和混合代码

  var img1 = document.getElementById("userImage")

  var img2 = document.getElementById('right_cheekImage');
  var img3 = document.getElementById('left_cheekImage');
  var img4 = document.getElementById('left_eyeImage');

  var canvas = document.getElementById("canvasID");
  var context = canvas.getContext("2d");

  var width = img1.width;
  var height = img1.height;
  canvas.width = 644;
  canvas.height = 490;

  context.drawImage(img1,0, 0, width, height);
  var image1 = context.getImageData(0, 0, width, height);
  var imageData1 = image1.data;
  context.drawImage(img2, img2.left, img2.top);
  context.drawImage(img3, img3.left, img3.top);
  context.drawImage(img4, img4.left, img4.top);

  var image2 = context.getImageData(0, 0, width, height);
  var imageData2 = image2.data;

  while (pixels--) {
        imageData1[pixels] = imageData1[pixels] * blendOne + imageData2[pixels] * blendTwo;
  }
  //apply opacity to pixels currently on the canvas
  for(var i=3; i < length; i+=4){
        imageData1[i] = 50;
  }

  image1.data = imageData1;

  //put in userimage again but under others
  context.drawImage(img1,newOffset, topPos, width, height);

  context.putImageData(image1, 0, 0);

如您所见，我添加了一些代码来为画布上当前的像素添加不透明度，但它不起作用。

如果有人能对此有所了解，那就太棒了。

4

1 回答 1

3

只是一个快速的小提琴向您展示如何合并不同的画布。

一种常见的技术是在一个画布中进行图像处理，然后将这个不可见的画布绘制到您实际要显示的画布中。

于 2012-08-09T12:13:32.680 回答