web-dev-qa-db-ja.com

javascriptでimageDataから画像を生成する方法は？

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

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

javascriptcanvasputimagedata
32
YemSalat

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.
}
24
David Shim

これまでの回答はいずれも、主題で提示された質問に対する回答を提供しません-ImageDataから画像を取得します。だからここに解決策があります。

function imagedata_to_image(imagedata) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = imagedata.width;
    canvas.height = imagedata.height;
    ctx.putImageData(imagedata, 0, 0);

    var image = new Image();
    image.src = canvas.toDataURL();
    return image;
}
31
skoll

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

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

を使用して画像の表現を取得できます

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

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

<img id='myimage'/>

document.getElementById('myimage').src = imgData;
7
lostsource

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

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

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

3
Amogh Talpallikar