Question

我在画布上绘制了3个图像，并使用此解决方案将它们混合在一起，一切运行良好，我很高兴，但我想对画布上的像素应用不透明度 - 类似于此方法 - {{已经尝试过但没有用的3}}。

一旦画布像素应用了不透明度，我就需要在半透明像素下面添加另一个图像并将整个事物导出为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);

正如您所看到的，我已添加了一些代码，以便为画布上当前的像素添加不透明度，但它不起作用。

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

Answer 1

只需quick fiddle即可向您展示如何合并不同的画布。

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

我可以在画布上添加3个图像，应用不透明度然后将另一个图像叠加在后面吗？

1 个答案: