2014-12-06 164 views
5

以JS開頭並不是我的強項之一。過去幾天我一直在嘗試編輯這個JS函數,使其強制下載base64映像。當下載按鈕被點擊時,該功能的功能是打開一個新的窗口,其上有圖像。用戶然後必須右擊並保存圖片。我試圖強制下載圖片,而不是右鍵單擊和「另存爲」。強制下載base64圖像

的dataurl農產品base4 PNG串(數據:圖像/ JPEG; BASE64,/ 9J/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQ .........)

我試圖使用如有人建議在另一個線程但沒有工作。

歡迎您提出任何建議。謝謝。

savePaint: function() { 
      var self = this; 

      dataURL = self.context.canvas.toDataURL(); 

      var cntnt = $("<p class='dialogHeader'>Please right click and select 'Save Image As' option. Click here to Return</p>   <img id='PrintImage' src=" + dataURL + ">"); 
      self.newSavedImage.html(cntnt); 

      self.showPopup(self.newSavedImage, self.canvasWidth, self.canvasHeight) 
} 

回答

0

你可以指定一個不同的MIME類型,而不是圖像/ JPEG這樣瀏覽器就不會嘗試打開本地圖片:

data:application/octet-stream;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/... 

這將迫使下載文件,但我注意到在某些瀏覽器配置中,可以使用默認文件名進行自動保存,並且由於瀏覽器不知道真實文件類型,所以用戶可以指定正確的類型。不幸的是,數據URI方案不允許建議的文件名。

查看Using HTML5/Javascript to generate and save a file獲取更多可能的解決方案。根據您的要求,最好的選擇可能是使用基於閃存的解決方案,如Downloadify

5

終於!我得到它的工作。對於任何面臨同樣問題的人,我在這裏找到了一個函數http://danml.com/download.html,它可以讓你強制下載base64。

+3

僅鏈接答案並不好。請將相關代碼複製到您的答案中。 – 2016-04-22 19:55:55

+0

大拇指下降直到相關的代碼添加。該鏈接太多是文字牆。更好的簡單的代碼在這裏回答:http://stackoverflow.com/questions/14011021/how-to-download-a-base64-encoded-image – Andrew 2017-05-09 20:27:42