javascript'te imageData'den bir Görüntü nasıl oluşturulur?

Question

Daha önce bir tuval öğesinden elde edilen imageData'dan yeni bir Görüntü oluşturmanın herhangi bir yolu olup olmadığını bilmek ister misiniz?

Bir çözüm aradım ama sonuçta sonuç bir tuvale çiziliyor gibi görünüyor. Temel olarak, mümkün ise bir ImageData nesnesini doğrudan Görüntü'ye dönüştürmenin bir yoluna ihtiyacım var. Bu varsayarsak

Answer 1

kullanabilirsiniz toDataURL Tuval içinde yöntemi. Veri URI'si olarak görüntü verileri oluşturur.

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); 

Eğer kullanıcının tarayıcısını tanımak istiyorsanız, Veri URI Şemasını destekler, bu işlevi kullanabilirsiniz. Imagedata'nın Görüntü alma - bu konuda sunuldu önceki cevapların

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. 
} 

Answer 2

Sen Ardından koyabilirsiniz

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

kullanarak görüntünün bir temsilini alabilirsiniz tuvalinizi

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

olduğunu kaynak değiştirerek düzenli resim etiketinde

<img id='myimage'/> 

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

Answer 3

Birçok modern tarayıcı, Veri URI şemasını destekler.

Görüntü verisine sahipseniz, JavaScript kullanarak bir img öğesinin src özniteliğini ayarlayabilirsiniz. Aşağıdaki örnekte de

Görünüş: http://www.websiteoptimization.com/speed/tweak/inline-images/

Answer 4

Yok soruya bir yanıt sağlar. İşte bir çözüm.

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; 
}