possibile usare immagini html come canvas con getImageData / putImageData?

Question

Vorrei sapere se esiste un modo per modificare / accedere in modo dinamico ai dati contenuti nelle immagini html come se fossero un elemento canvas html5. Con canvas, in javascript puoi accedere ai dati pixel grezzi 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 );

Nota che il passaggio 2 può anche essere portato da un'immagine caricata direttamente nello script, non nella 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

Puoi disegnare l'immagine su un elemento canvas con drawImage () , quindi ottieni i dati pixel dall'area di disegno.

Answer 3

Dopo aver riscontrato 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 4

che ha funzionato per me (IE10x64, Chromex64 su win7, chromium arm linux, ... sembra bug con firefox 20 arm linux ma non sono sicuro ... per riprovare)

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

- quindi -

  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

prima vuoi disegnare un'immagine sulla tela e poi ottenere l'immagineData dalla tela, è un modo sbagliato, perché js pensa che sia un "accesso a più domini", ma il metodo getIamgeData non lo fa consenti l'accesso " Cross-domain " a un'immagine.puoi provare a mettere il posto nella radice e accedervi da " localhost " .

Answer 6

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

Answer 7

Anche lavorare direttamente su elemento IMG è valido:

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

}) ;