Erstellung von Bild aus Array in javascript und Html5

Hier ist mein code. Ich erstellte Bilddaten 2D-array in javascript. Nachdem ich alle Pixel in diesem array möchte ich image erstellen und diese Werte in das Bild.

    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.
InformationsquelleAutor user3470518 | 2014-04-02
  1. 17

    Um ein Bild zu erstellen von array-das kannst du tun:

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

    Den * 4 am Ende darstellen, RGBA, die wir brauchen, um kompatibel zu sein mit canvas.

    Füllen des Puffers mit einigen Daten, zum Beispiel:

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

    Gefüllt, wenn die Verwendung des Puffers als Quelle für Leinwand:

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

    Beachten Sie, dass Sie mit der Bilddaten-Puffer (hier: idata.Daten) erstellen, anstatt Ihre eigenen. Erstellen Sie Ihre eigenen ist wirklich nur nützlich, wenn Sie beispielsweise Gleitkommazahlen oder Holen Sie sich die Puffer aus einer anderen Quelle - die Einstellung der Puffer wie oben kümmern clipping-und abrunden der Werte, die für Sie zwar.

    Nun die Daten in Ihrer benutzerdefinierten array kopiert, um den canvas-Puffer. Nächster Schritt ist das erstellen einer image-Datei:

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

    Nun können Sie mit dem data-uri als Quelle für ein Bild:

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

    Können Sie nicht ein Bild machen.src so.

    Einen gültigen dataURL ist ein base64-kodierter string mit Typ-Präfix--und nicht ein array.

    Den Bilddaten-array, verbunden mit einem canvas ist eine Uint8ClampedArray--nicht ein normales javascript-array.

    Hier ist ein Weg, um erstellen Sie ein pixel-array, das Sie Bearbeiten können:

    Demo: 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);
    InformationsquelleAutor markE
  3. 0

    Erstellen Sie eine canvas element die richtige Größe und bekommen den 2D-rendering-context. Sie müssen nicht fügen Sie diese canvas-Bereich, um das Dokument. Verwenden Sie die Kontext-zu erstellen ImageData Objekt. Kopieren Sie die Werte aus dem array in die ImageData Objekt. In Ihrem Fall kann es effizienter sein, die zum Auffüllen der ImageData Objekt in den ersten Platz, anstatt in einem separaten array. Verwenden Sie die Kontext-ist putImageData zum zeichnen der pixel-Daten. Dann, je nach den spezifischen Anforderungen der "Erstellung von Bild -," müssen Sie möglicherweise zu serialisieren, die Leinwand in eine data-uri, so dass Sie können füllen Sie eine img element src.

    • Aber nach, wenn ich mit putImageData, es wird das Bild gezeichnet werden soll. Ich will nicht, dies zu tun. Ich habe zu zeichnen, dieses Bild mit einem anderen Weg.
    • nur aus Neugier, warum wollen Sie nicht, dies zu tun, und warum haben Sie zu zeichnen, dieses Bild mit einem anderen Weg?
    • Ich will Bild senden mit webgl. Ich habe Ihre Weise, aber das wichtigste ist, dass ich die textur in webgl.
    • gehen auf eine Tangente, die Sie verwenden können, typisierte arrays angeben textur Daten in webgl khronos.org/registry/webgl/specs/1.0/#5.14.8
    InformationsquelleAutor guest
Schreibe einen Kommentar