45

以前にキャンバス要素から取得した imageData から新しい画像を作成する方法があるかどうか知りたいですか?

私は解決策を探しましたが、それらはすべて結果をキャンバスに描画しているようです。したがって、可能であれば、基本的に ImageData オブジェクトを Image に直接変換する方法が必要です。

4

4 に答える 4

25

CanvasでtoDataURLメソッドを使用できます。画像データをデータURIとして作成します。

var canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 100;
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 100, 100);

var img = document.createElement("img");
img.src = canvas.toDataURL("image/png");
document.body.appendChild(img);

ユーザーのブラウザがデータURIスキームをサポートしていることを知りたい場合は、この関数を使用できます。

function useSafeDataURI(success, fail) {
    var img = document.createElement("img");

    img.onerror = function () {
        fail();
    };
    img.onload = function () {
        success();
    };

    img.src = "data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="; // insert a dot image contains 1px.
}
于 2012-11-16T12:49:22.207 に答える
7

これがあなたのキャンバスだと仮定して

<canvas id='mycanvas'></canvas>

あなたはを使用してあなたの画像の表現を得ることができます

var imgData = document.getElementById('mycanvas').toDataURL();

次に、ソースを変更することで、それを通常の画像タグに入れることができます

<img id='myimage'/>

document.getElementById('myimage').src = imgData;
于 2012-11-16T12:45:00.130 に答える
1

最新のブラウザの多くは、データURIスキームをサポートしています。

画像データがある場合は、JavaScriptを使用してimg要素のsrc属性を設定できます。

次の例を見てください： http ：//www.websiteoptimization.com/speed/tweak/inline-images/

于 2012-11-16T12:45:01.630 に答える