6

getImageData;で奇妙な問題に気づきました。画像データを取得する際、画像の透明度は無視されているようです。

canvas画像データを取得する前に画像を描画する必要があるため、これは問題のcanvas不透明な問題であると推測しました。しかしcanvas、の引数としてを使用するとdrawImage透明性が維持されるため、私は間違っていました。

これが私が画像をロードした方法です。

var load_image = function(name, url, holder, callback) {
    var img = new Image();
    img.src = url;

    img.addEventListener('load', function(e) {
        var canvas = make_canvas(e.target.width, e.target.height);
        var ctx = canvas.getContext('2d');

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(e.target, 0, 0);

        holder[name] = {canvas: canvas, ctx: ctx};

        delete e.target;

        callback.call();
    }, false);
};

これcallbackは単に描画関数でありdraw_image、画像を描画するために呼び出されます。

通常のバージョン。

var draw_image = function(ctx, img, sx, sy, w, h, dx, dy) {
    ctx.drawImage(img.canvas, sx, sy, w, h, dx, dy, w, h);
};

単にキャンバスをの引数として取り、drawImage結果は透明性を維持したまま意図したとおりになります。例。

画像データバージョン。

var draw_image = function(ctx, img, sx, sy, w, h, dx, dy) {
    var imagedata = img.ctx.getImageData(sx, sy, w, h);
    ctx.putImageData(imagedata, dx, dy);
};

これは、通常のバージョンと同じキャンバスから必要な長方形の画像データを取得し、描画したいキャンバスに画像データを配置します。透明性を保つべきだと思いますが、そうではありません。例。（これはorigin-cleanフラグのためのDropboxリンクです。）

透明性を維持する必要があると仮定するのは間違っていgetImageDataますか？それとも私はそれを間違った方法で使用していますか？

いずれにせよ、助けていただければ幸いです。

4

1 に答える 1

8

あなたの問題は、 putImageData が複合操作を使用してソースと宛先の画像データをブレンドしていないことだと思います。むしろ、赤、緑、青、およびアルファチャネルをキャンバスに直接書き込みます。完全に透明なピクセルの場合、期待する色で表示される場合と表示されない場合があります。

代わりに、中間キャンバス要素を作成し、それに描画してから、drawImage() を使用して、適切な globalCompositeOperation が適用されたターゲット キャンバスにレンダリングできます。 HTML5キャンバスを使用したputImageDataのマスク? この問題について詳しく説明します。

更新:「壊れた」例に書き込んでいるデータに実際に透明なデータが含まれていることを確認するには、 を実行しますctx.getImageData(230,50,1,1).data。結果は [0,0,0,0] です。つまり、完全に透明なピクセルです。

于 2013-01-01T13:43:09.713 に答える