0

画像の最後と最初の 20 行を 2 つの別々のキャンバスにコピーしたくありません。上の20行をコピーするのはかなり簡単ですが、下の行に問題があります。

トップキャンバス:

    canvas_top.width = video.width;
    canvas_top.height = 20;
    var context_top = canvas_top.getContext('2d');
    context_top.drawImage(video, 0, 0, video.width, canvas_top.height);

インデックスを入力できないため、下の行はそのようにコピーできません。

ビデオのいくつかの行を新しいキャンバスにすばやくコピーする方法は何ですか?

これまでの私の考え：

キャンバスに空の値を入力し、元のデータに置き換えます。

for(var i=(frame_data.length)-bottom_delta;i<frame_data.length;i+=4){
        bottom_data.data[counter] = frame_data[i];
        bottom_data.data[counter+1] = frame_data[i+1];
        bottom_data.data[counter+2] = frame_data[i+2];
        bottom_data.data[counter+3] = frame_data[i+3];
        counter+=4;
        }

    context_bottom.putImageData(bottom_data,0,0);

これはうまくいきませんでした。

キャンバスを回転させようとしましたが、キャンバスを回転させても配列内のピクセルの位置は変わらないようです。

context.drawImage(video, 0, 0, video.width, video.height); context.scale(1,-1); context.translate(0,-video.height); context_bottom.drawImage(contextcanvas, 0, 0, video.width, video.height); context.scale(1,-1); context.translate(0,-video.height);

何か案は？

4

2 に答える 2

0

これは、 andを使用して簡単にする必要getImageDataがありputImageDataます。

// get bottom 20 rows from source canvas
var data = src_ctx.getImageData(0, 0, src_ctx.canvas.width, 20);

// put them into the destination canvas
dst_ctx.putImageData(data, 0, 0);
于 2013-07-05T23:11:11.610 に答える