加載圖像，並繪製在畫布上

我想在畫布上繪製一個圖像，其中圖像源將動態地user.I正在逐漸嘗試設置SRC圖像以下錯誤設置：加載圖像，並繪製在畫布上

不允許加載本地資源：文件：/// d：/My%20Picsb.jpg」

有什麼辦法來加載從本地硬盤文件中繪製它們在畫布上？

var img = new Image(); 
img.onload = function() { 
    context.drawImage(img, 20, 20, 50, 50); 
}; 

img.src = "D:\My Pics\tb.jpg";

來源

2014-02-09 user1448529

由於安全原因，您不想要什麼。你可能做，但是，將文件輸入字段和上傳它在畫布上，就像這樣：

HTML

<input type="file" id="file_input">

$("#file_input").change(function(e){ 


    var URL = window.webkitURL || window.URL; 
    var url = URL.createObjectURL(e.target.files[0]); 
    var img = new Image(); 
    img.src = url; 


    img.onload = function() { 

      img_width = img.width; 
      img_height = img.height; 

      context.drawImage(img, 0, 0, img_width, img_height); 

    } 


});

我有同樣的問題，因爲你不久以前，這個代碼做到了這個工作，當涉及到加載本地圖像到畫布上。然而，我也會建議最終調整圖像大小，以便它適合畫布。我使用了下面的代碼（用您的畫布大小替換）。

var new_x = 0; 
var new_y = 0; 

if (img_width > img_height) { 
    new_x = 460; 
    new_y = (460*img_height)/img_width; 
} 

else if (img_height > img_width) { 
    new_x = (460*img_width)/img_height; 
    new_y = 460; 
} 

else { 
    new_x = 460; 
    new_y = 460; 
} 

context.drawImage(img, 0, 0, new_x, new_y);

來源

2014-02-09 14:39:49

非常感謝你 – user1448529

@ user1448529沒有probs，man :) –

-3

編號JavaScript有訪問本地文件的安全塊，無論是讀取還是寫入。將該文件放在網絡服務器上（最好在同一個域上，因爲跨域問題）。

因爲您的用戶應該提供該文件，您必須編寫文件上傳解決方案。參考互聯網如何做到這一點。

來源

2014-02-09 14:46:06 HerrSerker

只是說...你引用的是跨域安全（CORS），但是如果用戶啓動提取，CORS不會限制加載本地圖像。用戶可以通過（1）激活html輸入類型文件元素或（2）通過主動將本地圖像拖動到使用FileReader獲取圖像的dataURL的dropzone div來啓動抓取。順便說一句，我並沒有對downvote你ding。乾杯! – markE

我需要類似的功能，並通過將圖像臨時上傳到服務器並將目標img的src屬性設置爲臨時文件名來解決問題。您可以通過創建一個cron作業來完成該任務，該作業從服務器目錄中刪除這些臨時圖像。

來源

2016-10-19 07:39:18 jjyepez

加載圖像，並繪製在畫布上

回答

相關問題