vue实现网页截图

1、首先进行安装html2Canvas

npm install html2canvas --save

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

import html2canvas from "html2canvas";

3、先编写一个截图按钮

<el-button class="button-dalod" size="mini" title="生成图片" @click="screenImage()" icon="el-icon-download"></el-button>

4.明确要截图的范围

  <!-- 页面所在截图范围内的父级添加ref属性,方便canvas找到父级计算宽高从而截屏 -->
    <div ref="imageTofile">
      <!-- 下面是要截图的区域 -->
      <div class="design" :style="'transform: scale(' + scale / 100 + ');'">
        <process-tree ref="process-tree" @selectedNode="nodeSelected" />
      </div>
    </div>

4、点击按钮进行截图，调用函数screenImage

  methods: {
        // 页面元素转图片
        screenImage() {
            // 手动创建一个 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")
                console.log(dataURL)
                this.downloadImage(dataURL)
            })
        },
        //下载图片
        downloadImage(url) {
            // 如果是在网页中可以直接创建一个 a 标签直接下载 
            let a = document.createElement('a')
            a.href = url
            a.download = '截图'
            a.click()
        },
        }

截图效果：

若要上传图片，将截完的图片转为文件流，上传给后台

将上面的dataUrl传递到base64转文件流的函数里面，就可以通过formdata传参传递给后台即可。

// base64图片转成二进制文件流
base64toFile (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
    })
},