1.保存图片至本地
下载文件是一个非常常见的需求，前端保存页面为图片，最常见的方案都是利用html2canvas来生成图片，同时利用HTML5的新属性download来点击保存到本地。
2.PC浏览器下载图片
网上一些实现方法由于跨域会导致a标签在部分浏览器中会直接打开新标签页，因此最终实现兼容性较好的下载方式为用 js 去获取图片，获得其 base64，放回 img 的 src 中再进行绘制。
分为四步：
- 用 JavaScript 创建一个隐藏的a标签
- 设置它的 href 属性
- 设置它的 download 属性
- 用 JavaScript 来触发这个它的 click 事件
downloadImage(selector, name) {
// selector 为要img 标签类或id名，name用来指定下载图片的名称
const image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute('crossOrigin', 'anonymous');
image.onload = () => {
const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
const context = canvas.getContext('2d');
context.drawImage(image, 0, 0, image.width, image.height);
const url = canvas.toDataURL('image/png');
// 生成一个a元素
const a = document.createElement('a');
// 创建一个单击事件
const event = new MouseEvent('click');
// 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
a.download = name || '下载图片名称';
// 将生成的URL设置为a.href属性
a.href = url;
// 触发a的单击事件
a.dispatchEvent(event);
};
image.src = document.querySelector(selector).src;
}
跨域问题需要在给 img 元素设置 crossOrigin:anonymous;属性，图片路径服务端必须设置允许跨域。
为了更快的响应，很多 CDN 会缓存图片的返回值，而缓存的值是不带 CORS 头的。因为没有 CORS 头，所以 js 请求会被拦截。
因此本地文件及图片管理系统中的图片可以下载，网络在线图片及iPic上的图片链接均存在跨域问题无法下载。
（除img标签图片下载之外还有canvas图片下载等方法。）
3.通过HTML5实现APP保存图片至相册
通过HTML5实现APP保存图片，需要调用手机系统中相册/保存图片到相册，经过查阅发现，现有APP保存图片HTML相关方法是通过HTML5 plus即中国HTML5产业联盟的扩展规范来进行实现。
通过属性plus.gallery获取相册管理对象。
具体开发实现参考：HTML5 Plus实现APP图片相关操作
4.总结
PC浏器实现下载图片该方法是基于从 DOM 读取的元素及属性来一点点的绘制 canvas，因此，它只能正确地呈现它理解的元素和属性，这意味着有许多 CSS 属性不起作用。图片大小、图片路径跨域问题、图片格式等都可能导致下载不成功。通过原生HTML5以及JS实现保存图片至APP本地相册并未找到方法实现。关于保存图片，涉及之前没了解过的知识点较多，关于相关学习本次只是简单了解，具体掌握还需继续深入学习。
