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;

});

},

相关推荐
WHOAMI_老猫1 小时前
XSS-LABS靶场通关讲解
前端·xss
要加油哦~1 小时前
前端 | 向后端传数据,判断问题所在的调试过程
前端·javascript·vue.js
中工钱袋3 小时前
Vue 中地址栏参数与 HTTP 请求参数的同步问题
前端·vue.js·http
一只月月鸟呀3 小时前
Vue 过滤器 filter(s) 的使用
javascript·vue.js·ecmascript
zzlyx993 小时前
设备管理系统功能与.NET+VUE(IVIEW)技术实现
前端·vue.js·view design
秋月华星5 小时前
【flutter】TextField输入框工具栏文本为英文解决(不用安装插件版本
前端·javascript·flutter
—Qeyser5 小时前
用Deepseek写一个 HTML 和 JavaScript 实现一个简单的飞机游戏
javascript·游戏·html
千里码aicood5 小时前
[含文档+PPT+源码等]精品基于Python实现的校园小助手小程序的设计与实现
开发语言·前端·python
青红光硫化黑6 小时前
React基础之React.memo
前端·javascript·react.js
大麦大麦6 小时前
深入剖析 Sass:从基础到进阶的 CSS 预处理器应用指南
开发语言·前端·css·面试·rust·uni-app·sass