Jak wygenerować obraz z imageData w javascript?

Question

Chciałbym wiedzieć, czy istnieje sposób na stworzenie nowego obrazu z imageData, który został wcześniej uzyskany z elementu canvas?

Szukałem rozwiązania, ale wszystkie wydają się rysować wynik na kanwie. Więc w zasadzie potrzebuję sposobu na konwersję obiektu ImageData bezpośrednio na obraz, jeśli jest to możliwe.

Answer 1

Można użyć toDataURL metoda w płótnie. Tworzy dane obrazu jako Dane 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); 

Jeśli chcesz sprawdzić, czy przeglądarka użytkownika obsługuje Schemat URI danych, możesz użyć tej funkcji.

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

Zakładając to Twoja płótno

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

Można uzyskać odwzorowanie obrazu przy użyciu

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

Następnie można umieścić, że w zwykłym tagu obrazu przez zmianę jego źródło

<img id='myimage'/> 

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

Answer 3

Wiele nowoczesnych przeglądarek obsługuje schemat danych identyfikatora URI.

Jeśli masz dane obrazu, możesz ustawić atrybut src elementu img za pomocą JavaScript.

Spójrz na poniższy przykład: http://www.websiteoptimization.com/speed/tweak/inline-images/

Answer 4

Żadna z poprzednich odpowiedzi nie stanowi odpowiedzi na pytanie, ponieważ została przedstawiona w temacie - uzyskanie obrazu z ImageData. Oto rozwiązanie.

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