前端使用JavaScript保存图片

在最近的开发当中，需要将一个生成的二维码保存在本地，然后网上找了一些资料，记录一下~

1.在你需要保存的img元素上绑定一个类名

 <vue-qr class="QRImg"  :size="260"  :text="QRCodeUrl"  :logoSrc="QrlogoSrc" 
      colorLight="#fff" colorDark="#000" :margin="0"></vue-qr>   

2.使用img保存

    // 下载二维码
    downloadIamge(el, name) {
       // 通过选择器获取img元素
      const img = document.querySelector(el);
      // // 将图片的src属性作为URL地址
      const url = img.src;
      const a = document.createElement("a");
      const event = new MouseEvent("click");
      a.download = name || "下载二维码";
      a.href = url;
      a.dispatchEvent(event);
    },

3.使用Canvas 保存

  // 通过选择器获取canvas元素
      const canvas = document.querySelector(selector);
      // 使用toDataURL方法将图像转换被base64编码的URL字符串
      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);

4.解决跨域下载的问题

    downloadIamge(selector, name) {
      const image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function() {
        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;
    },

5.总结 a标签的download属性

a标签加上downlaod属性后，就可完成对href属性链接文件的下载，但仅仅是限于同源文件，如果是非同源，download属性会失效。
无download属性的时候，a标签的默认行为是链接跳转进行预览，而针对浏览无法预览的文件，也可达到下载的效果。
记录一下工作日常，写得不太好，请各位看官见谅。