如何保存畫布圖像上傳到服務器之前？

所以基本上我通過攝像頭捕捉圖像與一些HTML5 vidoe,canvas和button標籤，但在我上傳此圖像到服務器之前，我需要將圖像保存到Internet臨時目錄，然後訪問圖像並上傳圖像到服務器，到目前爲止，我可以做的是捕捉到畫布上的圖像，但不知道如何將它保存在本地PC互聯網temp目錄，我發現了一個已經問的問題，其答案是如何保存畫布圖像上傳到服務器之前？

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); window.location.href=image;

的上面代碼的問題是，它彈出下載框到客戶端並請求客戶端保存它，但我需要保存圖像，而不會提示任何東西o用戶並將其保存到Internet臨時目錄中。

這裏是我把畫布圖像

document.getElementById("snapButton").addEventListener("click", function() { 
context.drawImage(video, 0, 0, 640, 480); 
var myImg = document.getElementById("myImg"); 
myImg.src = canvas.toDataURL(); 
});

所以，如果有人告訴我，我怎麼添加什麼代碼上面eventListener保存圖像我會很感激的代碼。

來源

2016-09-18 darees

_「上面代碼的問題是，它彈出下載框到客戶端，並要求客戶端保存它，但我需要保存圖像，而不會提示任何用戶到Internet臨時窗口」_只有用戶可以設置應該將哪個文件夾下載文件保存到瀏覽器首選項。爲什麼你不想讓用戶選擇文件將被保存在用戶文件系統的目錄？ – guest271314

沒有你有問題的問題我不想下載圖像我直接想將它保存到臨時文件夾， – darees

_「不，你有問題的問題我不想下載圖像我直接想把它保存到temp文件夾「_」下載「和」保存「有什麼區別？將圖像「保存」到「臨時文件夾」的目的是什麼？你的意思是用戶文件系統中的「臨時文件夾」？ – guest271314

如果您只需要一個臨時地點來存放一小段數據（< 5mb），則可以使用localStorage。將localStorage視爲您應用程序數據的本地臨時存儲區域。 LocalStorage不需要用戶的權限。

但出於明顯的安全原因，將任何內容存儲到用戶的磁盤將需要他們的許可，所以你不能避免彈出給用戶。

來源

2016-09-18 18:11:24 markE

當'canvas.toDataURL（）'可以作爲變量存儲時，爲什麼要保存到'localStorage'？ – guest271314

@ guest271314問題詢問關於保存到用戶設備。是的，你可以直接將AJAX的dataURL到服務器（我可能會這樣做）。你將不得不問問爲什麼他們有這個要求。 – markE

是的，在評論中提出了這個問題給OP。不完全清楚實際是什麼要求。 OP使用術語「保存」和「下載」，就好像它們是兩個獨立的進程一樣_「不，你有問題，我不想下載圖像，我直接想將它保存到臨時文件夾中，」_。您的提議會將文件保存到用戶的文件系統，儘管您可以通過存儲圖像的「Blob URL」而不是「image URI」來減少'localStorage'處引用文件的總體大小。 – guest271314

如何保存畫布圖像上傳到服務器之前？

回答

相關問題