Javascript 将图像从文件添加到HTML5画布

在HTML5画布中，我试图添加和图像。 该行：

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

这是不对的。 如何将文件添加到HTML5画布图像

  <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>

var canvas=document.getElementById（'myCanvas'）；
var context=canvas.getContext（'2d'）；
var centerX=canvas.width/2；
var centerY=canvas.height/2；
var imageObj=新图像（）；
imageObj.src='file://C:/Users/User/Documents/Image file/image1.jpg'；
imageObj.onload=函数（）{
drawImage（imageObj、centerX、centerY）；
};

imageObj.src应该是一个相对路径。例如，对于同一路径中的图像，if类似于imageObj.src='image1.jpg'；

---

路径与正在运行的html文件相对。

下面的示例将解释如何使用相对路径

假设项目结构如下所示：

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中设置它（如果您在本地环境中工作，并且希望用少量本地图像测试它，则可以使用此方法）。

尝试放置

imageObj.src='file://C:/Users/User/Documents/image file/image1.jpg'

在

imageObj.onload=function（）{}

之后，右键单击图像并在浏览器中打开它，复制路径并在

imageObj.src

中进行设置。上述方法将为您提供图像的绝对路径。此方法可能帮助您构建相对路径：如何设置相对路径？假设您在/root文件夹中运行html。您在/root/images文件夹中有一个图像。您可以执行imageObj.src='/root/images/image1.jpg'，然后图像路径应该是

images/image1.jpg

，因为html页面也在根文件夹中。您是对的，它可以是images/image1.jpg和/images/image1.jpg，但不是/root/images/images/image1.jpg