possible d'utiliser des images html comme canvas avec getImageData / putImageData?

Question

Je voudrais savoir s’il existe un moyen de modifier / d’accéder de manière dynamique aux données contenues dans les images html, comme si c’était un élément canvas html5. Avec canvas, vous pouvez accéder en javascript aux données de pixels brutes avec getImageData () et putImageData (), mais je n’étais pas encore parvenu à comprendre comment faire cela avec des images.

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

Notez que l'étape 2 peut également être importée à partir d'une image chargée directement dans le script, mais pas sur la page:

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

Vous pouvez dessiner l'image sur un élément de toile à l'aide de drawImage () , puis récupérez les données en pixels du canevas.

Answer 3

Après quelques problèmes avec ce code, je souhaite ajouter une ou deux choses à la réponse 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

qui a fonctionné pour moi (IE10x64, Chromex64 sur win7, Linux bras chromé, ... semble avoir un problème avec Firefox 20 bras linux mais je ne suis pas sûr ... de re-tester)

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

- puis -

  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

vous voulez d’abord dessiner une image sur la toile, puis récupérer les données image à partir de la toile, c’est une mauvaise façon, car les js pensent que c’est un "accès interdomaine", mais la méthode getIamgeData ne le permet pas. autoriser les " accès interdomaine " vous pouvez essayer en mettant le dans le répertoire racine et y accéder par "localhost". .

Answer 6

Je ne sais pas si c'est possible, mais vous pouvez essayer de demander des informations sur les pixels à PHP. Si la bibliothèque GD est une tâche facile, elle sera sûrement plus lente. Puisque vous n’avez pas spécifié d’application, je vous suggérerai donc de vérifier cette tâche avec SVG s’il s’agit d’images vectorielles que vous pourrez interroger ou modifier l’image.

Answer 7

Travailler directement sur l'élément IMG est également valide:

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

}) ;