Question

在HTML5 Canvas中我试图添加和图像。这一行：

$fond = imagecreatefromjpeg('link_of_image');

$font = "arial.ttf";
$noir  = imagecolorallocate($fond, 0, 0, 0);
$blanc = imagecolorallocate($fond, 0, 0, 0);

imagettftext($fond, 20, 0, 600, 80, $blanc, $font, $name);

imagestring($fond, 5, 200, 200, $lastname, $blanc);

header ("Content-type: image/jpg");
imagejpeg($fond);
imagedestroy($fond);

不正确。如何将文件添加到HTML5 Canvas Image？

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

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 =＆＃39; image1.jpg＆＃39 ;; Path是相对于正在运行的html文件。

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

2 个答案: