من الممكن استخدام صور HTML مثل اللوحة القماشية مع getImageData/putImageData؟

Question

أود معرفة ما إذا كانت هناك طريقة لتعديل/الوصول إلى البيانات الموجودة في صور html ديناميكيًا كما لو كانت عنصر قماش html5.باستخدام Canvas، يمكنك الوصول في جافا سكريبت إلى بيانات البكسل الأولية باستخدام getImageData() وputImageData()، لكنني لم أتمكن حتى الآن من معرفة كيفية القيام بذلك باستخدام الصور.

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

لاحظ أن الخطوة 2 كما يمكن جلبها من صورة تحميل مباشرة في السيناريو، وليس على الصفحة:

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

هل يمكن رسم صورة إلى عنصر قماش مع <لأ href = "http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#images" يختلط = "noreferrer"> drawImage () ، ومن ثم الحصول على بيانات البكسل من قماش.

Answer 3

وبعد وجود بعض القضايا مع هذا الرمز، وأود أن أضيف واحد أو اثنين من الأشياء إلى الإجابة 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

والتي عملت بالنسبة لي (IE10x64، Chromex64 على WIN7، الذراع الكروم لينكس، ... يبدو أن الخلل مع فايرفوكس 20 ذراع لينكس ولكن لست متأكدا ... لإعادة اختبار)

و- أتش تي أم أل -

<canvas id="myCanvas" width="600" height="300"></canvas>
<canvas id="myCanvasOffscreen" width="1" height="1"></canvas>

و- شبيبة -

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

و- بعد ذلك -

  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

وتريد أول من رسم الموافقة المسبقة عن علم على القماش ومن ثم الحصول على imageData من قماش، بل هو وسيلة خاطئة، لأن شبيبة يعتقدون أنه هو "الوصول عبر المجال"، ولكن طريقة getIamgeData لا تسمح في "الوصول عبر المجال" إلى image.you يمكن هافا المحاولة التي وضعت في مكان الجذر والوصول إليه عن طريق "مضيف".

Answer 6

وايم ليس متأكدا مما إذا كان ذلك ممكنا، ولكن يمكنك محاولة لطلب معلومات بكسل من PHP، إذا مكتبة GD سيكون مهمة سهلة، ولكن بالتأكيد سوف يكون أبطأ. وبما انك لم أكن المحدد تطبيق ولذا فإنني سوف أقترح فحص SVG لهذه المهمة إذا أنها يمكن أن تكون ناقل الصور من أنك سوف تكون قادرا على الاستعلام أو تعديل الصورة.

Answer 7

العمل مباشرة على عنصر آي إم جي صالح أيضًا:

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

}) ;