html2canvas

乌贼さま

于 2021-05-11 17:10:27 发布

阅读量256

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_42115781/article/details/116662043

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

官网：

https://html2canvas.hertzen.com/

参考文章:

https://www.jianshu.com/p/b70b52091b49?utm_campaign=haruki&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

安装：

npm install --save html2canvas

引入:

import html2canvas from “html2canvas”

<div 
  ref='shareImg'
  :style='{"background-image": "url(/static/img/share.jpg)"}'
  class="share-content-img"
>
  <!-- 日期 -->
  <div class='share-date'>
    xxx
  </div>

  <!-- 签单人 信息 -->
  <div class="shai-info">
    xxx
  </div>

  <!-- 下载按钮 -->
  <el-button :loading="loading" class='shai-down-btn' @click='downloadImg' type='text' icon='el-icon-download'></el-button>
</div>

downloadImg () {
  this.loading= true

  let canvasID = this.$refs['shareImg']
  let that = this
  let a = document.createElement('a')

  html2canvas(canvasID).then(canvas => {
    let dom = document.body.appendChild(canvas);
    dom.style.display = 'none';
    a.style.display = 'none';
    document.body.removeChild(dom);
    let blob = that.dataURLToBlob(dom.toDataURL('image/png'));
    a.setAttribute('href', URL.createObjectURL(blob));
    //这块是保存图片操作  可以设置保存的图片的信息
    a.setAttribute('download', '分享图片测试' + '.png');
    document.body.appendChild(a);
    a.click();
    URL.revokeObjectURL(blob);
    document.body.removeChild(a);

    setTimeout(() => {
      this.loading = false
    }, 1000)
  });
},

dataURLToBlob(dataurl) {
  let arr = dataurl.split(',');
  let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);
  while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}