vue下载图片

vue下载图片：利用html2canvas 下载图片

可设置背景色，下载的是dom节点

import html2canvas from 'html2canvas'
      //生成app二维码
      qrcodeOpen (data,type) {
        this.QrCodeType = type//业务需求
        this.qrcodeShow = false//业务需求
        this.dialogVisible = true//业务需求
        let sign = {
          'id':data.id,
          "type":"signin"
        }//业务需求
        let base64Code = new Buffer(JSON.stringify(sign)).toString("base64");//业务需求
        let imgUrl = this.imgBaseUrl + base64Code//业务需求
        this.$nextTick(()=>{
          let qrcode = new QRCode('qrcode',{
            width: 800, // 设置宽度，单位像素
            height: 800, // 设置高度，单位像素
            text: imgUrl, // 设置二维码内容或跳转地址
            colorDark: "#000000",//前景色
            colorLight: "#ffffff",//背景色
            correctLevel: QRCode.CorrectLevel.H//二维码 容错级别
          })
          setTimeout(() => {
            this.qrcodeShow = true
          }, 100);//业务需求
        })
      },
      //生成海报并在右侧预览
      previewFun(){
        let that = this;
        html2canvas(that.$refs.imageWrapper,{
          backgroundColor: null,
          async: true,
          scale:5
        }).then((canvas) => {
          let dataURL = canvas.toDataURL("image/png");
          let tmpBlob = that.base64ToBlob(dataURL);
          that.designImgDataURL = window.URL.createObjectURL(tmpBlob);
          console.log('预览的海报blob图片  ',that.designImgDataURL);
          let aLink = document.createElement('a');
          let evt = document.createEvent("HTMLEvents");
          evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
          aLink.download = new Date().getTime()+'.png';
          aLink.href = that.designImgDataURL;
          console.log(aLink)
          // aLink.dispatchEvent(evt);
          aLink.click()
        });
      },
      //base64转blob
      base64ToBlob(code) {
        let parts = code.split(';base64,');
        let contentType = parts[0].split(':')[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
 
        let uInt8Array = new Uint8Array(rawLength);
 
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {type: contentType});
      },

vue下载图片：不同域下的图片，会导致a标签download失效

将url转换为base64 模拟a标签下载

     //下载微信二维码1
      downloadWxImg() {
        this.getUrlBase64(this.wxQrCodeUrl).then(base64 => {
          let link = document.createElement('a')
          link.href = base64
          link.download = new Date().getTime()+'.png'
          link.click()
        })
      },
      //下载微信二维码2 将url转换为base64
      getUrlBase64(url) {
        return new Promise(resolve => {
          let canvas = document.createElement('canvas')
          let ctx = canvas.getContext('2d')
          let img = new Image()
          img.crossOrigin = 'Anonymous' //允许跨域
          img.src = url
          img.onload = function() {
            canvas.height = 300
            canvas.width = 300
            ctx.drawImage(img, 0, 0, 300, 300)
            let dataURL = canvas.toDataURL('image/png')
            canvas = null
            resolve(dataURL)
          }
        })
      },