首页 > Web开发 > 详细

html2canvas 生成base64图片 vue使用

时间:2021-06-03 23:28:41      阅读:35      评论:0      收藏:0      [点我收藏+]

1.引入 

import html2canvas from "html2canvas"
<div class="body-content" ref=‘creatImg‘>
    这是要生成图片的区域
</div>

<button @click=‘saveImg‘>保存</button>

saveImg(){
    //为避免出现位置偏移的情况,将滚动条置顶
    document.body.scrollTop = document.documentElement.scrollTop = 0
    html2canvas(this.$refs.creatImg,{scrollY:0}).then(canvas => {
      let dataURL = canvas.toDataURL("image/png");
          this.uImgUrl = dataURL;  //生成的图片连接地址
          this.file =  dataURLtoFile(dataURL, `test-${new Date().getTime()}.png`)  //将图片转为fie 文件流 
    })
    

}

2.将base 64图片生成为file流文件,如果需要将生成的图片传后台可使用此法

// // 图片base64格式转换成文件流格式
export function dataURLtoFile(base64File, filename){
    var arr = base64File.split(","),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mime });
}

写下该文章仅用于记录,如有不对的地方,望大神们不吝赐教

 

html2canvas 生成base64图片 vue使用

原文:https://www.cnblogs.com/lxs-616/p/14846324.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!