Question

我试图手动将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);

但是在我这样做之后画布上没有画出任何东西。有什么想法吗？

Answer 1

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

Answer 2

您正在使用

\ 
(backslash)

而不是

/ 
(forward-slash).

JavaScript使用\作为转义字符。

Answer 3

是的，路径必须位于Web文件夹或其他可访问路径中。您可以在此处看到代码的工作原理：http://jsfiddle.net/pwm36/8/

Answer 4

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

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

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

Answer 5

像其他人一样说过你需要使用网络服务器提供的图片。或者使用“file：//”协议。

小心点，装入图像时，只有在加载图像后才能绘制异步图像。

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

有关详细信息，请参阅MDN。

Javascript：用绝对路径设置img src

5 个答案: