2019-08-09 PC保存图片至本地

1.保存图片至本地

下载文件是一个非常常见的需求，前端保存页面为图片，最常见的方案都是利用html2canvas来生成图片，同时利用HTML5的新属性download来点击保存到本地。

2.PC浏览器下载图片

网上一些实现方法由于跨域会导致a标签在部分浏览器中会直接打开新标签页，因此最终实现兼容性较好的下载方式为用 js 去获取图片，获得其 base64，放回 img 的 src 中再进行绘制。

分为四步：

1. 用 JavaScript 创建一个隐藏的a标签
2. 设置它的 href 属性
3. 设置它的 download 属性
4. 用 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本地相册并未找到方法实现。关于保存图片，涉及之前没了解过的知识点较多，关于相关学习本次只是简单了解，具体掌握还需继续深入学习。

学习参考：

• MDN a标签说明
• canvas.toDataURL方法
• “被污染”的 canvas
• HTML5Gallery