Vue中实现页面截图并上传

Vue中实现页面截图并上传

1、安装html2Canvas

npm install html2canvas --save

2、在需要的vue组件中引入

import html2canvas from "html2canvas";

3、设置页面截图按钮点击事件

<span class="button-dalod" @click="toImage()" v-if="isCreate">生成证书图片</span>
<span class="button-dalod" @click="toDownload()">下载结业证书</span>

4、页面截图事件逻辑

// 页面元素转图片
toImage () {
    // 手动创建一个 canvas 标签
    const canvas = document.createElement("canvas")
    // 获取父标签，意思是这个标签内的 DOM 元素生成图片
    // imageTofile是给截图范围内的父级元素自定义的ref名称
    let canvasBox = this.$refs.imageTofile
    // 获取父级的宽高
    const width = parseInt(window.getComputedStyle(canvasBox).width)
    const height = parseInt(window.getComputedStyle(canvasBox).height)
    // 宽高 * 2 并放大 2 倍 是为了防止图片模糊
    canvas.width = width * 2
    canvas.height = height * 2
    canvas.style.width = width + 'px'
    canvas.style.height = height + 'px'
    const context = canvas.getContext("2d");
    context.scale(2, 2);
    const options = {
        backgroundColor: null,
        canvas: canvas,
        useCORS: true
    }
    html2canvas(canvasBox, options).then((canvas) => {
        // toDataURL 图片格式转成 base64
        let dataURL = canvas.toDataURL("image/png")
        
        //向后台上传图片时，首先将base64格式的图片转换成blod格式，然后再转换成file格式，即可上传
        this.uploadImg(dataURL)
    })
},
//上传图片
uploadImg(url){
    let formData = new FormData()
    let changeUrl = this.dataURLtoFile(url)
    let fileOfBlob = new File([changeUrl], new Date() + ".jpg"); // 命名图片名
    formData.append("file", fileOfBlob);
    uploadImageAPI(formData).then((res) => {
        this.$message.success('图片上传成功');
        this.downloadUrl = res.data
        this.certificateQuery.fileName = res.data
        saveCertificateAPI(this.certificateQuery)
    })
},
//base64转化成blod形式
dataURLtoFile(dataURI, type) {
    let binary = atob(dataURI.split(",")[1]);
    let array = [];
    for (let i = 0; i < binary.length; i++) {
      array.push(binary.charCodeAt(i));
    }
    return new Blob([new Uint8Array(array)], { type: type });
},
//下载结业证书
toDownload(){
    if(this.downloadUrl){
      let url = this.BASE_URL + this.requestPath.file + '/download/' + this.downloadUrl
      window.open(url)
    }else{
      this.$message.warning('请先生成结业证书图片，才可点击下载！')
    }
},

5、针对下载等操作，可以直接打开接口链接

let url = this.BASE_URL + this.requestPath.file + '/download/' + this.downloadUrl
window.open(url)