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绘制的图形保存到本地，进一步实现对图片资源的有效管理。