8

私のアプリケーションでは、いくつかの画像を取得して処理し、後で使用するために保存する必要があります。だから私はそれらを一時的なキャンバスに描き、それからgetImageData関数を使って取得しています。しかし、出力では透明性が失われます...

これが私のコードです：

var tempCanvas = document.createElement('canvas');
var tempContext = tempCanvas.getContext('2d');

tempContext.drawImage(image, 0, 0);
var imageData = tempContext.getImageData(0, 0, image.width, image.height);

私imageはいくつかの透明なピクセルを持っていますが、この後、imageDataこの問題を解決するにはどうすれば透明なピクセルがありませんか？

Html ImageをImageDataに変換して、処理してからキャンバスに描画できるようにする方法はありますか？

4

1 に答える 1

10

imageDataにはアルファチャネルが含まれている必要があります。

ただし、putImageDataはコンテキスト内のピクセル値を置き換えます。コンテキスト内のピクセルの以前の値とマージせず、置き換えます。したがって、表示されるのはキャンバスの背後のピクセルです（ほとんどの場合、htmlページのbodyタグのピクセルの色）。

あなたがしなければならないこと：

  • 一時的なキャンバスを使用して画像データを取得するのが良い方法です
  • 必要に応じてimageDataを変更します
  • このimageDataをputImageDataを使用してコーンテキストに戻そうとしないでください。希望どおりに動作しません。
  • ただし、新しいImageオブジェクトを作成し、ソースとしてimageDataを指定します（はい、機能します:)）
  • drawImageを使用して画像を描画します

コードの例：

var tempCanvas = document.createElement('canvas');
var tempContext = tempCanvas.getContext('2d');

tempContext.drawImage(image, 0, 0);
var imageData = tempContext.getImageData(0, 0, image.width, image.height);

//modify here the imageData as you need

var img = new Image();
img.src = imageData;
context.drawImage(img, 0, 0); //the true context of the canvas

動作するはずです。

于 2013-03-10T16:53:07.023 に答える