使用javascript將圖像保存到用戶磁盤

我已將HTML標記的源代碼作爲使用javascript的base64String傳遞。圖像顯示清晰。現在我想使用JavaScript將該圖像保存到用戶的磁盤。使用javascript將圖像保存到用戶磁盤

<html> 
<head> 
<script> 
function saveImageAs() { 
var imgOrURL; 
embedImage.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA"+ 
"AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO"+ 
"9TXL0Y4OHwAAAABJRU5ErkJggg=="; 
imgOrURL = embedImage; 
if (typeof imgOrURL == 'object') 
    imgOrURL = embedImage.src; 
window.win = open(imgOrURL); 
setTimeout('win.document.execCommand("SaveAs")', 0); 
} 
</script> 
</head> 
<body> 
    <a href="#" ONCLICK="saveImageAs(); return false" >save image</a> 

    <img id="embedImage" alt="Red dot"> 

</body> 
</html>

這段代碼時，我們通過的ImagePath作爲源標籤工作過，但是當我們通過爲base64String來標記SORCE它沒有工作。

請在這個問題上給我建議。

在此先感謝。

來源

2011-10-31 vengatesh

我知道有限的數據使用情況：圖像在IE中...文件大小和其他。嘗試之前看看它。 – Fabio

如果它有限制，那麼它不應該出現在屏幕上。但即使是長尺寸的圖像也會顯示圖像。我無法保存tom磁盤的映像。 – vengatesh

我可以通過bytearray作爲標籤使用javascript的源？ – vengatesh

只是爲了讓用戶下載圖片或其他文件，您可以使用HTML5 download屬性。

靜態文件下載

<a href="/images/image-name.jpg" download> 
<!-- OR --> 
<a href="/images/image-name.jpg" download="new-image-name.jpg">

動態文件下載

在請求圖像動態有可能效仿這種下載的情況。

如果您的圖像已經加載，你有那麼base64來源：

saveBase64AsFile(base64, fileName) { 

    var link = document.createElement("a"); 

    link.setAttribute("href", base64); 
    link.setAttribute("download", fileName); 
    link.click(); 
}

否則，如果圖像文件被下載爲Blob，您可以使用FileReader將其轉換爲Base64：

saveBlobAsFile(blob, fileName) { 

    var reader = new FileReader(); 

    reader.onloadend = function() {  
     var base64 = reader.result ; 
     var link = document.createElement("a"); 

     link.setAttribute("href", base64); 
     link.setAttribute("download", fileName); 
     link.click(); 
    }; 

    reader.readAsDataURL(blob); 
}

壞消息！小心： IE不支持：Caniuse link

來源

2016-05-30 08:43:37

現在支持Safari。 – Alex78191

在JavaScript中，您不能直接訪問文件系統。但是，您可以讓瀏覽器彈出一個對話窗口，允許用戶選擇保存位置。爲了做到這一點，使用replace方法與你的Base64String並更換"image/png"與"image/octet-stream"：

"data:image/png;base64,iVBORw0KG...".replace("image/png", "image/octet-stream");

此外，符合W3C的瀏覽器提供2種方法一起工作base64編碼和二進制數據：

也許，你會發現他們的方式有用...

這裏是什麼，我知道你需要一個重構版本：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"/> 
     <script type="text/javascript"> 
      window.onload = function() { 
       var img = document.getElementById('embedImage'); 
       var button = document.getElementById('saveImage'); 
       img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA'+ 
       'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO'+ 
       '9TXL0Y4OHwAAAABJRU5ErkJggg=='; 
       img.onload = function() { 
        button.removeAttribute('disabled'); 
       }; 
       button.onclick = function() { 
        window.location.href = img.src.replace('image/png', 'image/octet-stream'); 
       }; 
      }; 
     </script> 
    </head> 
    <body> 
     <img id="embedImage" alt="Red dot"/> 
     <input id="saveImage" type="button" value="save image" disabled="disabled"/> 
    </body> 
</html>

你可以看到它在行動HERE。

來源

2011-10-31 10:25:46

請注意'atob'和'btoa'從未成爲任何標準的一部分。它們受*一些*符合標準的瀏覽器支持，但不要指望它們都在其中。 –

@AndyE正確。這就是爲什麼您必須在使用這些方法之前執行功能測試的原因。 –

@John Doe：仍然無法獲取將圖像保存到用戶磁盤的保存對話框 – vengatesh

使用javascript將圖像保存到用戶磁盤

回答

相關問題