Javascript：用絕對路徑設置img src

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

您需要在Web服務器中將路徑設置為絕對路徑。
瀏覽器中的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

像其他人說的那樣你需要使用webserver提供的圖像。 或使用“file：//”協議。

小心，加載圖像時，只有在加載圖像后才能繪制異步圖像。

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

有關詳細信息，請參閱MDN 。