图片下载

图片下载 

图片源需要允许跨域 

getUrlBase64 = (url,name)=> {
    var img = url;
    var image = new Image();
    var _t = this;
    image.crossOrigin = '*'//设置img.crossOrigin
    image.src = img;
    image.onload = function () {
      var base64 = _t.getBase64Image(image);
      const a = document.createElement('a')//创建a标签下载
      a.download = name
      a.style.display = 'none'
      a.href = base64
      document.body.appendChild(a)
      a.click()
      a.remove()
      window.URL.revokeObjectURL(base64)
    }
  }
  getBase64Image=(img)=> {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
    var dataURL = canvas.toDataURL("image/" + ext);
    return dataURL;
  }

<button onClick={this.getUrlBase64.bind(url,'下载名称')}>

 

html2canvas下载图片

  作用是截取div成图片下载

下载插件
npm i html2canvas --save

引入方法
import html2canvas from 'html2canvas';

：：使用中碰到2个问题

1.div滚动后截取不正确
    
解决方法

createPicture = ()=> {
    window.scrollTo(0, 0);//防止截取内容偏移
    html2canvas(document.getElementById('activity'),{
        useCORS: true,
        allowTaint:true
    }).then(canvas => {
        this.imgmap = canvas.toDataURL()
        console.log(999, this.imgmap)
        if (window.navigator.msSaveOrOpenBlob) {
          var bstr = atob(this.imgmap.split(',')[1])
          var n = bstr.length
          var u8arr = new Uint8Array(n)
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
          }
          var blob = new Blob([u8arr])
          window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
        } else {
          // 这里就按照chrome等新版浏览器来处理
          const a = document.createElement('a')
          a.href = this.imgmap
          a.setAttribute('download', '海报下载')
          a.click()
        }
      });
  }

<div>
    <p></p>
    <img src='http://' />
</div>

 

2使用插件时dom中含有跨域图片
    
解决方法

createPicture = ()=> {
    window.scrollTo(0, 0);//防止截取内容偏移
    html2canvas(document.getElementById('activity'),{
        useCORS: true,
        allowTaint:true//是否允许跨源图像污染画布
    }).then(canvas => {
        this.imgmap = canvas.toDataURL()
        console.log(999, this.imgmap)
        if (window.navigator.msSaveOrOpenBlob) {
          var bstr = atob(this.imgmap.split(',')[1])
          var n = bstr.length
          var u8arr = new Uint8Array(n)
          while (n--) {
            u8arr[n] = bstr.charCodeAt(n)
          }
          var blob = new Blob([u8arr])
          window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png')
        } else {
          // 这里就按照chrome等新版浏览器来处理
          const a = document.createElement('a')
          a.href = this.imgmap
          a.setAttribute('download', '海报下载')
          a.click()
        }
      });
  }

<div>
    <p></p>
    <img src='http://' crossOrigin="anonymous"/>//设置img.crossOrigin
</div>

参考https://github.com/niklasvh/html2canvas/issues中问题解决