0

我正在使用以下方式： -

代码

<!DOCTYPE HTML>
<html>
<head>
  <style>
   body {
     margin: 0px;
      padding: 0px;
   }
   #myCanvas {
     border: 1px solid #9C9898;
   }
  </style>
 <script>
  window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var imageObj = new Image();

    imageObj.onload = function() {
      context.drawImage(imageObj, 69, 50);
    };
    imageObj.src = "C:\Images\Demo.jpg";
  };

</script>
</head>
<body>
  <canvas id="myCanvas" width="578" height="400"></canvas>
</body>
</html>

我想将此图像加载到画布中。在 imageObj.src 中传递图像 URL 是否正确？

还是有其他方法可以加载图像？

提前致谢

4

1 回答 1

3

你几乎是对的。如果要在本地加载文件，则需要在路径前加上file:///：

imageObj.src = "file:///C:/Images/Demo.jpg";  // also, use forward slashes, not backslashes

我认为所有浏览器都会要求您将图像存储在与当前 HTML 页面相同的目录或子目录中，这样本地 HTML 页面就无法从您的硬盘驱动器中抓取东西。

我建议您创建相对于当前 HTML 文档的路径。如果页面在，file:///C:/Users/shanky/webpages/page.html那么只需使用：

imageObj.src = "img/Demo.jpg";

加载位于 的图像file:///C:/Users/shanky/webpages/img/Demo.jpg。如果您将页面移动到新文件夹或将其托管在不再使用该file:协议的服务器上，这会更容易。

请注意，大多数浏览器对资源的同源策略file:非常挑剔。在简单的本地服务器上托管您的应用程序并使用http://localhost.

于 2012-07-25T07:26:57.693 回答