无法在带有 gif 文件的 javascript 中获取图像数据(）;可以与填充矩形.怎么了

Can't getImageData() in javascript with gif file; can with FillRect. What's wrong?

本文关键字：数据 怎么了 填充矩形 图像 获取 gif 文件 javascript      更新时间：2023-09-26

当我使用 FillRect 在画布上创建矩形时，看起来 getImageData 可以工作，但是当我在画布上绘制 gif 时它不起作用，尽管它绘制正确并且所有内容。不知道为什么会这样 - 这是安全风险吗？帮助？

<html>
<body>
<p>Image to use:</p>
<img id="scream" width="230" height="60" src="http://www.thekitmaker.com/image/3.gif" alt="The Scream">
<p>Canvas:</p>
<canvas id="myCanvas" width="230" height="60" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
function getPixel(imgData, index) {
  var i = index*4, d = imgData.data;
  return [d[i],d[i+1],d[i+2],d[i+3]] // [R,G,B,A]
}
// AND/OR
function getPixelXY(imgData, x, y) {
  return getPixel(imgData, y*imgData.width+x);
}

window.onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    //draw on canvas
    var img = document.getElementById("scream");
    ctx.drawImage(img,10,10,50,50);//,0,0);// c.width,c.height);
    //ctx.fillStyle = "red";
    //ctx.fillRect(10, 10, 50, 50);
    //get image data
    alert("h");
     var imgData = ctx.getImageData(10, 10, 50, 50);
    alert("h2");
    // The magic®
    //getPixel(idt, 852);  // returns array [red, green, blue, alpha]
    alert("p:"+getPixelXY(idt,1,1)[0]); // same pixel using x,y
}
</script>
</body>
</html>

您说得对，这是出于安全原因。如果您将来自不同来源的图像绘制到画布上，则该画布将被标记为"受污染"，并且您无法再从中获取图像数据等。

参考： http://www.w3.org/TR/html51/semantics.html#security-with-canvas-elements

相关文章：