Javascript：使用绝对路径设置 img src答案

【问题标题】：Javascript: Setting img src with absolute pathJavascript：使用绝对路径设置 img src
【发布时间】：2023-03-03 00:00:02
【问题描述】：

我正在尝试手动将 img src 设置为文件系统上的路径，然后我想在画布上绘制该图像。我正在使用：

    var curr_canv = document.getElementById('c_main').getContext('2d');
    var img = new Image();

    img.width = 525;
    img.height = 400;

    img.src = "..\AAAA\BBBB\CCCC\myimage.jpg";

    curr_canv.drawImage(img,0,0);

但是在我这样做之后，画布上什么也没有画出来。有什么想法吗？

【问题讨论】：

你试过img.onload = function() { curr_canv.drawImage(img,0,0); }吗？见this MDN reference。 "Trying to call drawImage before the image has finished loading will... silently do nothing in Gecko 2.0 and later."
我认为使用 canvas 编写代码的人不知道 javascript 中包含图像的基础知识。
此代码是从 Web 服务器（通过 http:// 或 https://）提供还是通过 file:// 在本地访问？

标签： javascript html canvas html5-canvas image

【解决方案1】：

正如其他人所说，您需要使用网络服务器提供的图像。或者使用“file://”协议。

小心，以异步方式加载图像，您希望仅在图像加载后才能绘制。

img.onload = function() {
   curr_canv.drawImage(img,0,0);
}

请参阅MDN 了解更多信息。

【讨论】：

【解决方案2】：

简短的回答是“你不能那样做”。在浏览器中运行的 Javascript 无法直接访问用户的文件系统。这是一般浏览器的安全功能。

有一个用于 HTML5 的相对较新的 FileSystem API，但它可能仍然无法满足您的需求，因为浏览器仍然“被监禁”。您无法访问浏览器保留的目录之外的任何文件。

您可以考虑拖放 API。用户可以将文件拖放到您指定的区域，我认为您可以使用 Javascript 访问它。

【讨论】：

【解决方案3】：

是的，路径必须位于 web 文件夹或其他可访问的路径中。您可以在这里看到您的代码通常可以正常工作：http://jsfiddle.net/pwm36/8/

【讨论】：

【解决方案4】：

你正在使用

\ 
(backslash)

而不是

/ 
(forward-slash).

JavaScript 使用 \ 作为转义字符。

【讨论】：

我将反斜杠更改为正斜杠，但这并没有解决问题。

【解决方案5】：

您需要在您的网络服务器中将路径设置为绝对路径。
浏览器中的 Javascript 无法访问任何文件系统。

【讨论】：

我试图这样做的原因是我的目标是让用户选择一个带有 OpenFileDialog 的 config.txt 文件。然后代码将解析该文本文件以读取图像路径（我已经有这部分工作）并显示所有图像，其路径列在文本文件中。你会如何建议这样做？
@user1669641：你也不能使用 OpenFileDialog。 浏览器中的Javascript无法访问任何文件系统
如果您在 C# 中执行此操作，那么当您实际将其放在服务器上时，您会感到非常惊讶。你不能这样做。