如何從系統中獲取圖像畫布上加載HTML5

CODE

<!DOCTYPE HTML> 
<html> 
<head> 
    <style> 
    body { 
    margin: 0px; 
     padding: 0px; 
    } 
    #myCanvas { 
    border: 1px solid #9C9898; 
    } 
    </style> 
<script> 
    window.onload = function() { 
    var canvas = document.getElementById("myCanvas"); 
    var context = canvas.getContext("2d"); 
    var imageObj = new Image(); 

    imageObj.onload = function() { 
     context.drawImage(imageObj, 69, 50); 
    }; 
    imageObj.src = "C:\Images\Demo.jpg"; 
    }; 

</script> 
</head> 
<body> 
    <canvas id="myCanvas" width="578" height="400"></canvas> 
</body> 
</html>

我想在畫布上加載此圖像。在imageObj.src中傳遞圖片URL是否正確？

或者有沒有其他的方法來加載圖像？

由於事先

來源

2012-07-25 Shanky

你已經幾乎權利。如果您是在本地加載文件，你需要file:///前綴的路徑：

imageObj.src = "file:///C:/Images/Demo.jpg"; // also, use forward slashes, not backslashes

我認爲所有的瀏覽器都需要你有存儲在同一目錄中或從當前HTML頁面中的子目錄中的圖像，所以本地HTML頁面無法從硬盤驅動器中抓取所有東西。

我建議你製作相對於當前HTML文檔的路徑。如果該頁面在file:///C:/Users/shanky/webpages/page.html就用：

imageObj.src = "img/Demo.jpg";

加載位於file:///C:/Users/shanky/webpages/img/Demo.jpg的圖像。如果將頁面移至新文件夾或將其託管在服務器上，則不再使用file:協議。

請注意，大多數瀏覽器都相當挑剔same origin policy for file: resources。將應用程序託管在簡單的本地服務器上並使用http://localhost訪問它可能更容易。

來源

2012-07-25 07:26:57 apsillers

謝謝你回答apsillers，這對我來說現在正確。但是當我使用這個屬性時，它會變得失敗。 \t var imageData = context.getImageData（mx，my，1，1）; MX和我的鼠標位置 – Shanky 2012-07-25 09:36:48

@Shanky很高興我能幫上忙。不幸的是，我認爲關於'getImageData'的後續問題太複雜了，無法在評論中快速回答。一般來說，在Stack Overflow中，如果你的程序有一個新的問題，只需打開一個新的問題！ – apsillers 2012-07-25 11:38:56

而且，只是一個瘋狂的猜測 - 也許[這個鏈接]（http://stackoverflow.com/questions/1040724/how-do-i-bypass-a-same-origin-policy-violation-for-one-local文件到另一個）將解決你的問題？再一次，你應該開一個新的問題，但也許這個鏈接會給你一個問題的起點（或者幫你完全自己解決問題）。 – apsillers 2012-07-25 11:41:43

如何從系統中獲取圖像畫布上加載HTML5

回答

相關問題