2

ユーザーが選択したフィルターが適用されたビデオ要素があります。スナップショットを撮ろうとすると、ビデオに適用されたフィルターがスナップショットに適用されません。

// live is a video element and snapshot is a canvas
function onTakeSnapshot() {

    // Make the canvas the same size as the video
    snapshot.width = live.clientWidth;
    snapshot.height = live.clientHeight;
    // Draw a frame of the live video onto the canvas
    var c = snapshot.getContext("2d");
    c.drawImage(live, 0, 0, snapshot.width, snapshot.height);
    snapshot.style.opacity = 1;
}

たとえば、同じフィルターをスナップショットに適用できることはわかっていますが、snapshot.className='';snapshot.classList.add('grayscale');ディスクに保存すると同じ問題がvar img = snapshot.toDataURL();発生します。つまり、フィルターが適用されていない画像になります。現在、画像を個別に操作してgetImageData()\putImageData()いますが、キャンバス + フィルターとは結果が異なることがよくあります。私はキャンバスが初めてで、フィルターが既に適用されている画像を描画して保存する方法があるかどうか疑問に思っていました。ありがとう！

4

1 に答える 1

0

あなたの質問が意味するように、ブラウザーで Web ページのスクリーンショットを撮ることはできません。

<canvas>結果を保存する必要がある場合は、すべてのフィルタリング コードをプッシュすることをお勧めします。

于 2012-11-17T13:17:07.430 に答える