以編程方式將圖像保存爲HTML5/Java Script

我試圖讓按鈕以png格式保存圖像。該圖像可以來自URL，來自資源或來自web api以編程方式將圖像保存爲HTML5/Java Script

我是網絡開發世界的初學者。我知道，任何按鈕操作可以這樣做：

<input type="button" value="Save image"  onclick="saveimage();" />

或像這樣（我不知道哪一個是更好地執行）

<button type="button" onclick="saveimage();">Save Image</button>

我不知道要放什麼東西在Javascript頭可以將圖像保存爲PNG。任何線索？

謝謝！

來源

2013-02-12 user1415780

你有一個visual-studio-2012標籤......這是ASPX的任何機會嗎？ – Rhs 2013-02-12 20:49:43

您是否還有其他一些用戶可以提供圖像的輸入控件？它總是在.png中，或者你可能需要轉換它？ – 2013-02-12 20:50:36

@Rhs這不是ASPX，它是HTML5與Java腳本 – user1415780 2013-02-12 20:55:05

我所知道的唯一的解決辦法是這樣的一個：

<script> 
function saveImageAs (imgOrURL) { 
    if (typeof imgOrURL == 'object') 
     imgOrURL = imgOrURL.src; 
    window.win = open (imgOrURL); 
    setTimeout('win.document.execCommand("SaveAs")', 500); 
    } 
</script> 
<body> 

    <A HREF="javascript: void 0" 
    ONCLICK="saveImageAs(document.anImage); return false" > 
    save image</A> 
    <IMG NAME="anImage" SRC="../apache_pb2.gif"> 
</body>

但它只能在IE瀏覽器。這將是不同的故事，如果你會使用服務器端腳本（PHP，ASP）。然後你可以設置響應頭來強制用戶下載一個文件（獲取另存爲..對話框）

來源

2013-02-12 21:30:07

感謝您的反饋我試圖應用此方法，但即使在IE中，我也遇到了一個錯誤：一旦我點擊該按鈕，就會打開一個新窗口，顯示「資源不能找到「，然後打開一個保存對話框，詢問是否保存一個返回到相同錯誤頁面的HTM頁面....任何線索？ – user1415780 2013-02-12 23:35:23

剛剛在本地機器上試過 - 在新窗口（IE9和FF18）中打開圖像。如果你有「資源未找到錯誤」，請仔細檢查爲圖像提供的src和onclick事件的saveImageAs應該獲取document.ImageName作爲參數。 – 2013-02-13 00:15:11

謝謝，我有一個打字錯誤，它的工作原理，你描述:) 以我的理解，要得到一個另存爲對話框，我將需要使用PHP或ASP，有沒有辦法在JavaScript中做到這一點？ – user1415780 2013-02-13 15:38:49

以編程方式將圖像保存爲HTML5/Java Script

回答

相關問題