从文件中将图像添加到HTML5 Canvas

Question

在HTML5 Canvas中我试图添加和图像。 这条线：

 imageObj.src = 'file://C:/Users/User/Documents/Image File/image1.jpg';

是不正确的。 如何将文件添加到HTML5 Canvas图像？

  <canvas id="myCanvas" width="1000" height="1000"></canvas>
  <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var imageObj = new Image();
        imageObj.src = 'file://C:/Users/User/Documents/Image File/image1.jpg';
        imageObj.onload = function () {
            context.drawImage(imageObj, centerX, centerY);
        };
   </script>

Answer 1

以下示例将说明如何使用相对路径。

假设项目结构如下：

project(think of this as root)/
    |->index.html
    |->css/
      |->main.css
    |->images/
      |-> cartoon.jpg
    |->cat.jpg
    |->other_pages/
      |->about.html
      |->contact.html

现在，如果我们在index.html页面中，我们应该将图像src设置为：

img = new Image();
cat = new Image();

//accessing cat.jpg
cat.src = "cat.jpg";

//accessing cartoon.jpg
img.src = "images/cartoon.jpg";

现在让我们转到about.html页面，在这里我们可以通过以下方式访问图像：

img = new Image();
cat = new Image();

//accessing cat.jpg
cat.src = "../cat.jpg";

// accessing cartoon.jpg
img.src = "../images/cartoon.jpg";
// here .. signifies moving one step back
//.. is similar to executing **cd ..** in command line.

对于绝对路径，试试这个：

右键单击图像并在浏览器中打开它，复制路径并将其设置在imageObj.src中（如果您在本地环境中工作并希望使用少量本地图像进行测试，则可以使用此方法。）

Answer 2

imageObj.src应该是一个相对路径。 例如，对于同一路径中的图像，如果像imageObj.src ='image1.jpg'那样; Path是相对于正在运行的html文件。