La création d'image à partir du Tableau en javascript et Html5

Voici mon code. J'ai créé données images tableau 2D en javascript. Après j'ai mis tous les pixels dans le présent tableau, je veux créer une image et la placer ces valeurs dans l'image.

    var imageData = new Array(width);

    var image = new Image;

for (var i = 0; i < width; i++) {
    imageData[i] = new Array(height);
}

    image.src = imageData; //Here is the problem. I want to do that.

OriginalL'auteur user3470518 | 2014-04-02

  1. 16

    Pour créer une image de tableau, vous pouvez le faire:

    var width = 400,
    height = 400,
    buffer = new Uint8ClampedArray(width * height * 4); //have enough bytes

    La * 4 à la fin représenter RGBA dont nous avons besoin pour être compatible avec la toile.

    De remplissage de la mémoire tampon avec certaines données, par exemple:

    for(var y = 0; y < height; y++) {
    for(var x = 0; x < width; x++) {
        var pos = (y * width + x) * 4; //position in buffer based on x and y
        buffer[pos  ] = ...;           //some R value [0, 255]
        buffer[pos+1] = ...;           //some G value
        buffer[pos+2] = ...;           //some B value
        buffer[pos+3] = 255;           //set alpha channel
    }
}

    Lorsqu'il est rempli d'utiliser le tampon en tant que source de la toile:

    //create off-screen canvas element
var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');

canvas.width = width;
canvas.height = height;

//create imageData object
var idata = ctx.createImageData(width, height);

//set our buffer as source
idata.data.set(buffer);

//update canvas with new data
ctx.putImageData(idata, 0, 0);

    Notez que vous pouvez utiliser les données images de la mémoire tampon (ici: idata.de données) au lieu de créer votre propre. La création de votre propre est vraiment utile que si vous utilisez par exemple des valeurs à virgule flottante ou d'obtenir de la mémoire tampon à partir d'une autre source - réglage de la mémoire tampon comme ci-dessus prendra soin de clipping et de l'arrondissement des valeurs pour vous si.

    Maintenant les données dans votre tableau personnalisé est copié sur la toile de la mémoire tampon. La prochaine étape consiste à créer un fichier image:

    var dataUri = canvas.toDataURL(); //produces a PNG file

    Maintenant, vous pouvez utiliser le data-uri en tant que source de l'image:

    image.onload = imageLoaded;       //optional callback function
image.src = dataUri

    OriginalL'auteur

  2. 4

    Vous ne pouvez pas faire une image.src comme ça.

    Valide dataURL est une chaîne encodée en base64 avec un type de préfixe--pas un tableau.

    L'image du tableau de données associée à une toile est un Uint8ClampedArray--pas normal d'un tableau javascript.

    Voici une façon de créer un réseau de pixels que vous pouvez manipuler:

    Une Démo: http://jsfiddle.net/m1erickson/956kC/

    //create an offscreen canvas
var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");

//size the canvas to your desired image
canvas.width=40;
canvas.height=30;

//get the imageData and pixel array from the canvas
var imgData=ctx.getImageData(0,0,40,30);
var data=imgData.data;

//manipulate some pixel elements
for(var i=0;i<data.length;i+=4){
    data[i]=255;   //set every red pixel element to 255
    data[i+3]=255; //make this pixel opaque
}

//put the modified pixels back on the canvas
ctx.putImageData(imgData,0,0);

//create a new img object
var image=new Image();

//set the img.src to the canvas data url
image.src=canvas.toDataURL();

//append the new img object to the page
document.body.appendChild(image);

    OriginalL'auteur markE

  3. 0

    Créer un canvas élément de la bonne taille et obtenir son 2D contexte de rendu. Vous n'avez pas à ajouter cette toile pour le document. Utiliser le contexte pour créer une ImageData objet. Copie les valeurs de votre tableau dans la ImageData objet. Dans votre cas, il pourrait être plus efficace pour remplir la ImageData objet, en premier lieu, au lieu d'un tableau séparé. Utiliser le contexte de la putImageData de tracer les données de pixel. Ensuite, en fonction des exigences spécifiques de la Création de l'image," vous pourriez avoir besoin de sérialiser la toile dans les data uri, de sorte que vous pouvez remplir un img de l'élément src.

    Mais après si j'utilise putImageData, il va attirer l'image. Je ne veux pas le faire. Je dois dessiner cette image avec une autre façon.
    juste par curiosité, pourquoi ne voulez-vous pas faire cela, et pourquoi avez-vous de tirer cette image avec une autre façon?
    Je veux envoyer une image avec webgl. Je l'ai fait à votre façon, mais l'important, c'est que je dois utiliser la texture en webgl.
    aller sur une tangente, vous pouvez utiliser les tableaux typés pour spécifier les données de texture en webgl khronos.org/registry/webgl/specs/1.0/#5.14.8

    OriginalL'auteur guest