隨著互聯(lián)網(wǎng)和移動互聯(lián)網(wǎng)的發(fā)展，圖片已經(jīng)成為最主流的信息傳遞方式之一。作為網(wǎng)站開發(fā)者，我們也需要將圖片作為重要的組成部分去考慮。而當(dāng)我們需要讓用戶在網(wǎng)站上保存圖片時，我們就需要借助javascript來完成這個過程。
所謂保存圖片，就是將當(dāng)前網(wǎng)頁上的某一個圖片保存到本地。而在javascript中，我們可以通過以下兩種方式實(shí)現(xiàn)：
方式一：通過canvas將圖片轉(zhuǎn)換成base64格式，然后將該base64編碼轉(zhuǎn)成二進(jìn)制數(shù)據(jù)流，進(jìn)行本地存儲。
下面是基于此方法的代碼示例：

<code>
function saveImage() {
var elem = document.getElementById("img");
var canvas = document.createElement('canvas');
canvas.width = elem.width;
canvas.height = elem.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(elem, 0, 0);
var dataURL = canvas.toDataURL("image/png");
var link = document.createElement("a");
link.download = "img.png";
link.href = dataURL;
link.click();
}
</code>

該函數(shù)的作用是將id為img的圖片保存到本地。首先我們創(chuàng)建一個新的canvas元素，將圖片像素數(shù)據(jù)通過canvas轉(zhuǎn)換為dataURL。最后，我們創(chuàng)建一個a元素，并將下載地址指定為dataURL資源，最后點(diǎn)擊該元素實(shí)現(xiàn)下載。
方式二：直接利用HTML5的download屬性實(shí)現(xiàn)圖片下載。
這種方法更為簡單，只需要使用一個a元素，利用download屬性和圖片名稱即可實(shí)現(xiàn)下載。例如下面的代碼：

<code>
function saveImage() {
var a = document.createElement("a");
a.href = document.getElementById("img").src;
a.download = "img.png";
a.click();
}
</code>

該函數(shù)同樣是將id為img的圖片下載到本地。不同之處是我們直接利用了圖片的src屬性，將圖片地址賦值給a元素。通過download屬性指定了下載文件的名稱，最后點(diǎn)擊即可實(shí)現(xiàn)下載。
無論采用哪一種方式，javascript都能輕松地實(shí)現(xiàn)圖片的保存功能。我們只需要根據(jù)實(shí)際情況，選擇最合適的實(shí)現(xiàn)方式即可。