possibile utilizzare immagini html come canvas con getImageData/putImageData?

Question

Mi piacerebbe sapere se esiste un modo per modificare/accedere in modo dinamico i dati contenuti nelle immagini html proprio come se fossero un elemento canvas html5. Con canvas, puoi in javascript accedere ai dati grezzi dei pixel con getImageData() e putImageData(), ma finora non sono stato in grado di capire come farlo con le immagini.

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

Si noti che la fase 2 può anche essere portato in da un'immagine caricata direttamente nel copione, non sulla pagina:

// 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 2

Non sono sicuro che sia possibile, ma puoi provare a richiedere le informazioni sui pixel da PHP, se la libreria GD sarà un compito facile, ma sicuramente sarà più lento. Dal momento che non hai specificato l'applicazione, ti suggerirò di controllare SVG per questa attività se possono essere immagini vettoriali di quelle che saranno in grado di interrogare o modificare l'immagine.

Answer 3

È possibile disegnare l'immagine su un elemento di tela con drawImage() e quindi ottenere i dati di pixel dall'area di disegno.

Answer 4

si vuole prima di disegnare un pic sulla tela e quindi ottenere il imageData dalla tela, è un modo sbagliato, perché il js pensa che sia un "accesso Cross-domain", ma il metodo getIamgeData non consente l'accesso "Cross-domain" a un'immagine. Puoi avere una prova di metti il ​​nella radice e accedilo da "localhost".

Answer 5

Dopo avendo alcuni problemi con questo codice, voglio aggiungere una o due cose alla risposta di Phrogz:

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

che ha funzionato per me (IE10x64, Chromex64 su win7, braccio di cromo Linux, ... sembra al bug con firefox 20 ARM Linux ma non è sicuro ... di re-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; 
    } 

- allora -

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

Direttamente lavorare su IMG elemento vale anche:

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

}) ;