vue截图上传

截图

npm install html2canvas

import html2canvas from 'html2canvas'
import { UploadFile } from '@/api/index'


// 将base64转换为blob
dataURLtoBlob(base64Data) {
    // 将base64的数据部分提取出来
    const arr = base64Data.split(',')
    const mime = arr[0].match(/:(.*?);/)[1]
    const bstr = atob(arr[1])
    let n = bstr.length
    const u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    // 将Uint8Array转换为Blob对象
    const blob = new Blob([u8arr], { type: mime })
    console.log(blob, 'blob')
    // 创建File对象
    const file = new File([blob], 'image.png', { type: mime })
    return file
}
screenshot() {
    var el = document.getElementById('PlayVideo')
    html2canvas(el, {
        scale: 3, // 设置缩放
        useCORS: true, // 允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
        allowTaint: true,
        logging: false, // 打印日志用的 可以不加默认为false
        backgroundColor: '#ffffff'
    }).then((canvas) => {
        const imgData = canvas.toDataURL('image/png', 1.0);
        // base64转文件接口
        var file = this.dataURLtoBlob(imgData)
        // 上传文件接口
        this.uploadFile(file)
    })
},

// 上传接口
uploadFile(val) {
    const formData = new FormData()
    formData.append('file', val)
    UploadFile(formData).then(res =>{
        this.ListImage.push({ url: res.data, label: '截图上传' })
        console.log(res)
    })
},