web-dev-qa-db-fra.com

Comment générer une image à partir de imageData en javascript?

Je voudrais savoir s'il existe un moyen de créer une nouvelle image à partir de imageData, qui a été précédemment obtenue à partir d'un élément de canevas?

J'ai cherché une solution, mais ils semblent tous dessiner le résultat sur une toile. Donc, fondamentalement, j'ai besoin d'un moyen de convertir un objet ImageData en Image directement, si c'est possible.

javascriptcanvasputimagedata
32
YemSalat

Vous pouvez utiliser la méthode toDataURL dans Canvas. Il crée des données d'image sous forme d'URI de données.

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

Si vous voulez savoir que le navigateur de l'utilisateur prend en charge le schéma d'URI de données, vous pouvez utiliser cette fonction.

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

Aucune des réponses précédentes ne répond à la question telle qu'elle a été présentée dans le sujet - obtenir une image à partir d'ImageData. Voici donc une solution.

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

En supposant que c'est votre toile

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

Vous pouvez obtenir une représentation de votre image en utilisant

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

Vous pouvez ensuite mettre cela dans une balise d'image régulière en changeant sa source

<img id='myimage'/>

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

De nombreux navigateurs modernes prennent en charge le schéma d'URI de données.

Si vous disposez des données d'image, vous pouvez définir l'attribut src d'un élément img à l'aide de JavaScript.

Regardez l'exemple suivant: http://www.websiteoptimization.com/speed/Tweak/inline-images/

3
Amogh Talpallikar