möglich, HTML-Bilder wie Canvas mit getImageData/putImageData zu verwenden?

Question

Ich würde gerne wissen, ob es eine Möglichkeit gibt, die in html Bildern enthaltenen Daten dynamisch zu ändern, so als wären sie ein html5 canvas Element. Mit canvas können Sie in Javascript auf die rohen Pixeldaten mit getImageData() und putImageData() zugreifen, aber ich bin bisher nicht in der Lage, herauszufinden, wie man das mit Bildern macht.

Answer 1

// 1) Create a canvas, either on the page or simply in code 
var canvas = document.createElement('canvas'); 
var ctx = canvas.getContext('2d'); 

// 2) Copy your image data into the canvas 
var myImgElement = document.getElementById('foo'); 
ctx.drawImage(myImgElement, 0, 0); 

// 3) Read your image data 
var w = myImgElement.width, h=myImgElement.height; 
var imgdata = ctx.getImageData(0,0,w,h); 
var rgba = imgdata.data; 

// 4) Read or manipulate the rgba as you wish 
for (var px=0,ct=w*h*4;px<ct;px+=4){ 
    var r = rgba[px ]; 
    var g = rgba[px+1]; 
    var b = rgba[px+2]; 
    var a = rgba[px+3]; 
} 

// 5) Update the context with newly-modified data 
ctx.putImageData(imgdata,0,0); 

// 6) Draw the image data elsewhere, if you wish 
someOtherContext.drawImage(ctx.canvas, 0, 0); 

Bitte beachte, dass Schritt 2 kann auch direkt in Skript, nicht auf der Seite geladen in von einem Bild gebracht werden imageData aus dem Canvas, es ist ein falscher Weg, weil die js denken, es ist ein "Cross-Domain-Zugriff", aber die getIamgeData-Methode nicht erlauben den "Cross-Domain-Zugriff" auf ein Bild.Sie können versuchen Setze das in den Root-Bereich und greife auf "localhost" zu.

Answer 2

Ich bin nicht sicher, ob es möglich ist, aber Sie können versuchen, Pixelinformationen von PHP anzufordern, wenn GD Bibliothek es eine leichte Aufgabe sein wird, aber sicher langsamer sein wird. Da Sie die Anwendung nicht angegeben haben, werde ich vorschlagen, SVG für diese Aufgabe zu überprüfen, wenn es sich um Vektorbilder handelt, als Sie das Bild abfragen oder ändern können.

Answer 3

Sie können das Bild mit drawImage() auf ein Canvas-Element zeichnen und dann die Pixeldaten aus der Zeichenfläche abrufen.

// 2b) Load an image from which to get data 
var img = new Image; 
img.onload = function(){ 
    ctx.drawImage(img, 0, 0); 
    // ...and then steps 3 and on 
}; 
img.src = "/images/foo.png"; // set this *after* onload 

Answer 4

Sie zuerst wollen ein Bild auf der Leinwand zu ziehen und dann bekommen die:

Answer 5

Nach ein paar Probleme mit diesem Code haben, möchte ich ein oder zwei Dinge zu Phrogz Antwort hinzuzufügen:

// 1) Create a canvas, either on the page or simply in code 
var w = myImgElement.width, h=myImgElement.height; // NEw : you need to set the canvas size if you don't want bug with images that makes more than 300*150 

var canvas = document.createElement('canvas'); 
canvas.height = h; 
canvas.width = w; 
var ctx = canvas.getContext('2d'); 

// 2) Copy your image data into the canvas 
var myImgElement = document.getElementById('foo'); 
ctx.drawImage(myImgElement, 0, 0, w, h); // Just in case... 

// 3) Read your image data 
var imgdata = ctx.getImageData(0,0,w,h); 
var rgba = imgdata.data; 

// And then continue as in the other code ! 

Answer 6

die für mich gearbeitet (IE10x64, Chromex64 auf win7, Chrom Arm Linux, ... scheint um Fehler mit Firefox 20 Arm linux aber nicht sicher ... wieder Test)

--html--

<canvas id="myCanvas" width="600" height="300"></canvas> 
<canvas id="myCanvasOffscreen" width="1" height="1"></canvas> 

- js -

// width & height can be used to scale image !!! 
    function getImageAsImageData(url, width, height, callack) { 
    var canvas = document.getElementById('myCanvasOffscreen'); 
    canvas.width = width; 
    canvas.height = height; 
    var context = canvas.getContext('2d'); 

    var imageObj = new Image(); 
    imageObj.onload = function() { 
     context.drawImage(imageObj, 0, 0, width, height); 
     imgData = context.getImageData(0,0,width, height); 
     canvas.width = 1; 
     canvas.height = 1; 

     callack(imgData); 
    }; 
    imageObj.src = url; 
    } 

- dann -

var canvas = document.getElementById('myCanvas'); 
    var ctx = canvas.getContext('2d'); 

    var imgData; 
    getImageAsImageData('central_closed.png', IMG_WIDTH, IMG_HEIGHT, 
    function(imgData) { 

     // do what you want with imgData.data (rgba array) 
     // ex. colorize(imgData, 25, 70, 0); 

     ctx.putImageData(imgData,0,0); 

    } 
); 

Answer 7

Direkt auf IMG Element arbeiten, ist auch gültig:

var image = document.createElement('img'),w,h ; 

image.src = "img/test.jpg" ; 

$(image).one('load',function(){ 

    w = image.naturalWidth ; 
    h = image.naturalHeight ; 

    var cnv = document.createElement('canvas') ; 
    $(cnv).attr("width",w) ; 
    $(cnv).attr("height",h) ; 

    var ctx = cnv.getContext('2d') ; 
    ctx.drawImage(image,0,0) ; 

    var imgdata = ctx.getImageData(0,0,w,h) ; 

    var rgba = imgdata.data ; 
    for (var px=0,ct=w*h*4;px<ct;px+=4){ 
     var r = rgba[px+0] ; 
     var g = rgba[px+1] ; 
     var b = rgba[px+2] ; 
     var a = rgba[px+3] ; 
     // Do something 
     rgba[px+0] = r ; 
     rgba[px+1] = g ; 
     rgba[px+2] = b ; 
     rgba[px+3] = a ; 
    } 

    ctx.putImageData(imgdata,0,0) ; 

    $("body").append(cnv) ; 

}) ;