posible utilizar imágenes html como canvas con getImageData/putImageData?

Question

Me gustaría saber si hay una forma de modificar/acceder dinámicamente a los datos contenidos en las imágenes html como si fueran un elemento de lienzo html5. Con canvas, puede acceder en javascript a los datos de píxel sin procesar con getImageData() y putImageData(), pero hasta ahora no he podido averiguar cómo hacerlo con las imágenes.

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

Tenga en cuenta que el paso 2 también puede ser llevado desde una imagen cargada directamente en la escritura, no en la página:

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

No estoy seguro de si es posible, pero puede intentar solicitar información de píxeles desde PHP, si la biblioteca GD será una tarea fácil, pero seguramente será más lenta. Como no especificó la aplicación, le sugiero que compruebe SVG para esta tarea si pueden ser imágenes vectoriales, de lo que podrá consultar o modificar la imagen.

Answer 3

Puede dibujar la imagen en un elemento canvas con drawImage(), y luego obtener los datos de píxeles del lienzo.

Answer 4

primero desea dibujar una imagen en el lienzo y luego obtener el imageData del lienzo, es una forma incorrecta, porque el js piensa que es un "acceso entre dominios", pero el método getIamgeData no permite el "acceso entre dominios" a una imagen. Puede intentarlo ponga el en el lugar de la raíz y acceda a él por "localhost".

Answer 5

Después de tener algunos problemas con este código, quiero añadir una o dos cosas a la respuesta de 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

que trabajó para mí (IE10x64, Chromex64 en Win7, linux brazo cromo, parece ... a error con Firefox 20 Linux brazo, pero no estoy seguro ... para volver a probar)

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

- entonces -

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

trabajar directamente en elemento IMG es también válida:

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

}) ;