Question

我正在设计T恤，要求我在使用drawImage（）将图像放置到画布上之后在画布上绘制形状。但是，如果我通过drawImage将图像添加到画布，则无法使getImageData（）正常工作。两天后，我放弃了，去了w3schools。奇怪的是，代码是直接在w3schools中编写的，而在我在硬盘驱动器上生成的文档中却没有。然后，我尝试将文件上传到服务器，但仍然无法正常工作。这是我在w3schools上生成的代码，然后将其复制并粘贴到硬盘上。

这是我在w3schools中工作的URL（只需将下面的代码复制并粘贴到w3schools中，以表明其有效）：https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage

在w3schools中，画布上的数字“ 84,73,71,255”用白色大字母书写。在我的硬盘驱动器和服务器（1and1.com）上，这不会发生。

我也尝试了其他一些代码片段，例如使用getImageData创建负片图像。那也不起作用。

<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" width="220" height="277" src="https://www.w3schools.com/tags/img_the_scream.jpg" alt="The Scream">

<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
window.onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 10, 10);
  var d = ctx.getImageData(100,100,1,1);
  d = d.data;
  ctx.fillStyle = "white";
  ctx.font = "30px Arial";
  ctx.fillText(d,20,200);
}
</script>

<p><strong>Note:</strong> The canvas tag is not supported in Internet 
Explorer 8 and earlier versions.</p>

</body>
</html>

getImageData（）不适用于所有浏览器，但可以直接在w3schools中使用

0 个答案: