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

異なるキャンバスをマージする方法を示す簡単なフィドルです。

一般的な手法は、1 つのキャンバスで画像操作を行い、後でこの非表示のキャンバスを実際に表示するキャンバスに描画することです。

于 2012-08-09T12:13:32.680 に答える