2014-10-10 85 views
0

我正在嘗試製作我的第一款遊戲。當然,我正在嘗試製作背景圖片。我正在使用這個對象的鏈接和DrawImage();函數在屏幕上繪製我的圖像。來自計算機的畫布上的繪畫圖像

imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; 

這給了想要的結果,我可以在屏幕上加載圖像,但我需要以加載它是在線的,因爲它是一個鏈接。

我已經嘗試用文件路徑替換鏈接,但唉,它沒有工作。

有沒有辦法從我的電腦加載一個圖像文件到Canvas,而不是在線來運行程序?

任何幫助將不勝感激。

謝謝!

-IronApe

+1

您可以使用加載本地圖像。使用URL.createObjectURL(theFile)將文件變成URL – dandavis 2014-10-10 22:18:12

+1

哪個對象? – Teemu 2014-10-10 22:18:19

+0

你能告訴我們你是如何試圖用文件路徑取代鏈接的嗎?另外爲了澄清,這個圖像文件在你的本地機器上? – 2014-10-10 22:45:57

回答

0

是的。您只需要將圖像放在同一個目錄中(或者您需要找到它的路徑)。例如,如果我們有我們這樣的目錄設置:

myFile.html 
myImage.jpg 

然後,你可以這樣做:

imageObj.src = 'myImage.jpg'; 

或者說,例如,你有圖片的目錄:imgs

myFile.html 
imgs 
-> myImage.jpg 

然後,你可以這樣做:

imageObj.src = 'imgs/myImage.jpg'; 
+0

請注意,這僅適用於HTML文件在您的計算機上。大多數情況下,如果文件託管在服務器上,則無需使用[File API](http://www.w3.org/TR/FileAPI/)即可訪問客戶端的文件系統。 – 2014-10-10 22:34:32

+0

@Derek朕會功夫是的,但OP確實說:*從我的電腦到Canvas *。我假設這意味着他將圖像複製到他的本地機器上。 – 2014-10-10 22:39:42

+0

*我試圖用文件路徑替換鏈接,但是,它不起作用*所以頁面沒有用文件協議'file://' – 2014-10-10 22:40:46

0

只需使用相對路徑。例如,如果您下載的圖像,並將其保存在同一目錄在您的HTML是,這會工作:

imageObj.src = 'darth-vader.jpg'; 

另一個例子,說這是在images目錄,那麼這將工作:

imageObj.src = 'images/darth-vader.jpg'; 

等等......你只需要指定圖像相對於你調用它的文件的正確路徑。

+0

打開順便說一句,OP明確地說*我試過替換與文件路徑的鏈接,但唉,它沒有工作。*因此,我懷疑該頁面可能託管在服務器上(可能是本地主機)。 – 2014-10-10 22:37:37

+0

@Derek朕會功夫可能,但他不應該使用'file:///'。相對路徑應該從任何地方工作。 – Shomz 2014-10-10 22:55:36