JavaScript image保存是Web前端開發中非常重要的內容之一。當我們需要將頁面上的圖片保存到本地，或是將繪制好的canvas圖形保存到本地時，都會用到JavaScript image保存相關的知識。

在JavaScript中，要保存一張圖片，可以先將該圖片以base64編碼的形式加載進來，然后再通過HTML5 canvas將其繪制出來，最后使用canvas.toDataURL()方法將繪制好的圖片轉化為DataURL數據，通過a標簽的download屬性即可實現文件下載。

let img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'https://xxx.xxx.com/xxx.jpg';
img.onload = function () {
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
let dataURL = canvas.toDataURL();
let a = document.createElement('a');
a.download = 'xxx.jpg';
a.href = dataURL;
document.body.appendChild(a);
a.click();
}

另外，對于canvas繪制而成的圖形，同樣可以使用canvas.toDataURL()轉化為DataURL數據進行保存。比如，我們可以使用canvas繪制一個矩形，并將其保存到本地：

let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 150;
ctx.rect(10, 10, 280, 130);
ctx.fillStyle = '#f2f2f2';
ctx.fill();
let dataURL = canvas.toDataURL();
let a = document.createElement('a');
a.download = 'xxx.png';
a.href = dataURL;
document.body.appendChild(a);
a.click();

如果我們需要在保存圖片時對圖片進行壓縮處理，可以使用第三方庫FileSaver.js。該庫提供了saveAs()方法，可以將Blob對象轉化為可下載文件并保存到本地。

首先，需要使用canvas.toBlob()方法將canvas圖形轉化為Blob對象。然后，使用FileSaver.js的saveAs()方法進行文件的保存。下面是使用FileSaver.js對canvas圖形進行壓縮和保存的示例代碼：

let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 500;
ctx.fillStyle = '#f2f2f2';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#f00';
ctx.arc(250, 250, 200, 0, Math.PI * 2);
ctx.fill();
canvas.toBlob(function (blob) {
saveAs(blob, "xxx.png");
});

以上就是JavaScript image保存相關的知識，借助這些方法，我們可以方便地將頁面上的圖片或是canvas繪制的圖形保存到本地，進一步實現對圖片資源的有效管理。