possível usar imagens HTML como tela com getImageData / putImageData?

Question

Eu gostaria de saber se existe uma maneira de modificar de forma dinâmica / acessar os dados contidos em imagens HTML apenas como se fossem um elemento HTML5 Canvas. Com tela, você pode no acesso javascript os dados de pixel matérias com getImageData () e putImageData (), mas eu tenho sido até agora não são capazes de descobrir como fazer isso com imagens.

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

Note que o passo 2 também podem ser trazidos de uma imagem carregada diretamente no roteiro, não na 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

Você pode desenhar a imagem para um elemento de tela com drawImage () , e em seguida, obter os dados de pixel da tela.

Answer 3

Depois de ter alguns problemas com este código, eu quero adicionar uma ou duas coisas a resposta 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 4

que funcionou para mim (IE10x64, Chromex64 em Win7, linux braço cromo, ... parece bug com o Firefox 20 linux braço, mas não tenho certeza ... para re-teste)

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

- então -

  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 5

primeiro você quer tirar uma foto na tela e, em seguida, obter o imageData da tela, é uma maneira errada, porque os js acho que é um "acesso entre domínios", mas o método getIamgeData não permitem o "acesso Cross-domain" a um image.you pode hava uma tentativa de colocar o no lugar raiz e acessá-lo por "localhost".

Answer 6

Im não tem certeza se é possível, mas você pode tentar solicitando informações de pixel do PHP, se biblioteca GD será uma tarefa fácil, mas certamente será mais lento. Desde que você não tenha especificado aplicativo por isso vou sugerir verificar SVG para esta tarefa se eles podem ser imagens do vetor do que você será capaz de consulta ou modificar a imagem.

Answer 7

Diretamente trabalhar em elemento IMG também é válido:

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

}) ;