Question

当我使用FillRect在画布上创建一个rect时，看起来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>

Answer 1

你是正确的，这是出于安全原因。如果您将来自不同原点的图像绘制到画布上，则画布将标记为＆＃34; tainted＆＃34;除此之外，您无法再从中获取图像数据。

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

使用gif文件可以在javascript中获取getImageData（）;可以用FillRect。怎么了？

1 个答案: