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

Add image to HTML5 Canvas from a file

本文关键字：HTML5 画布 添加 文件 图像      更新时间：2023-09-26

在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>
下面的示例

将解释如何使用相对路径。

假设项目结构如下所示：

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

现在让我们转到大约.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 应该是一个相对路径。例如，对于同一路径中的图像，如果类似于 imageObj.src = 'image1.jpg";路径相对于正在运行的 html 文件。

相关文章：