möglich html Bilder wie Leinwand mit getImageData / putImageData zu benutzen?

Question

Ich würde gerne wissen, ob es einen Weg gibt, um dynamisch zu ändern / Zugriff auf die in HTML-Bildern enthaltenen Daten, als ob sie ein html5 Canvas-Element waren. Mit Leinwand, können Sie in JavaScript, die Rohpixeldaten mit getImageData () und putImageData (), aber ich habe bisher nicht in der Lage gewesen, um herauszufinden, wie diese mit Bildern zu tun.

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

Beachten Sie, dass Schritt 2 kann auch in von einem Bild direkt in Skript geladen gebracht werden, nicht auf der Seite:

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

Sie können das Bild auf eine Leinwand Element zeichnen mit drawImage () , und dann die Pixeldaten von der Leinwand bekommen.

Answer 3

Nachdem ich einige Probleme mit diesem Code haben, möchte ich ein oder zwei Dinge zu Phrogz Antwort hinzuzufügen:

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

, die für mich gearbeitet (IE10x64, Chromex64 auf win7, Chrom Arm Linux, ... scheint Bug mit Firefox 20 Arm Linux aber nicht sicher ... wieder 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;
  }

- dann -

  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

Sie zuerst ein Bild auf der Leinwand zeichnen wollen und dann die imagedata von der Leinwand zu bekommen, ist es ein falscher Weg, weil die js denke, es ist ein „Cross-Domain-Zugriff“, aber die getIamgeData Methode nicht zulassen der „Cross-Domain-Zugriff“ auf eine image.you kann durch setzte die in der Wurzel Ort einen Versuch hava und es durch „localhost“ zugreifen.

Answer 6

Ich bin nicht sicher, ob es möglich ist, aber Sie können Ihr Interesse an Pixelinformationen von PHP versuchen, wenn GD-Bibliothek wird es eine einfache Aufgabe, aber sicherlich langsamer. Da Sie Anwendung angegeben didnt so werde ich SVG für diese Aufgabe vorschlagen zu überprüfen, ob sie Vektor-Bilder sein können, als Sie in der Lage sein, um das Bild abzufragen oder zu ändern.

Answer 7

Direkt auf Arbeit IMG-Element ist auch gültig:

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

}) ;