vue 截图转base64转文件File 异步获取

复制代码
import html2canvas from "html2canvas";
export   function  base64ImgtoFile(dataurl, filename = 'file') {
    let arr = dataurl.split(',')
    let mime = arr[0].match(/:(.*?);/)[1]
    let suffix = mime.split('/')[1]
    let bstr = atob(arr[1])
    let n = bstr.length
    let u8arr = new Uint8Array(n)
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], `${filename}.${suffix}`, {
      type: mime
    })
  }


  export   function toImages(imageTofile) {
    return new Promise((resolve, reject) => {
      html2canvas(imageTofile, {
        backgroundColor: null,
        useCORS: true 
      }).then((canvas) => {
        const url = canvas.toDataURL('image/png');
          resolve(base64ImgtoFile(url))
      }).catch((err) => {
        reject(err)
      })
    })
  }

// 调用

toImage() {

let that=this;

toImages(this.$refs.imageTofile).then((imgFileRaw) => {

that.imgFileRaw = base64ImgtoFile(this.htmlUrl);

}).catch((error) => {

that.imgFileRaw = null;

});

},

相关推荐
reembarkation14 小时前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
reembarkation14 小时前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
李明卫杭州14 小时前
JavaScript中的dispatchEvent方法详解
javascript
KenXu14 小时前
F2C-PTD工具将需求快速转换为代码实践
前端
给月亮点灯|14 小时前
Vue3基础知识-setup()、ref()和reactive()
前端·javascript·vue.js
芜青14 小时前
【Vue2手录12】单文件组件SFC
前端·javascript·vue.js
冷冷的菜哥14 小时前
react实现无缝轮播组件
前端·react.js·typescript·前端框架·无缝轮播
hrrrrb15 小时前
【Python】字符串
java·前端·python
阿笑带你学前端15 小时前
Supabase云同步架构:Flutter应用的数据同步策略
前端
Martin-Luo15 小时前
Vue3 通过json配置生成查询表单
javascript·vue.js·json