vue3中使用html2canvas实现截图功能

1、安装

npm i html2canvas

2、使用

<template>
	<el-card class="mb15">
		<template #header>
			<span>html2canvas</span>
		</template>
        <img width="480" height="16" :src="base64img" alt="">
    </el-card>
</template>

<script setup lang="ts" name="demoView">
import {  ref, onMounted } from 'vue';
import html2canvas from 'html2canvas';

/*
    html2canvas
        第一个参数是要截图的dom元素
        第二个参数是个对象
            {
                allowTaint: 
                background: canvas背景颜色，默认为透明
                width: canvas宽度
                height: canvas高度
                letterRendering: 在设置了字间距的时候有用
                logging: 在console.log()中输出信息
                proxy: 代理地址
                taintTest: 是否在渲染前测试图片
                timeout: 图片加载延迟，默认延迟为0，单位毫秒
                useCORS: 
            }
    
*/
const base64img = ref()
onMounted(() => {
	html2canvas(document.querySelector(".file-item")).then((canvas) => {
        // 转换成base64格式，这个格式可以挂载到img里，也可以下载下来，也可以打压缩包下载下来
        const base64 = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '')
        base64img.value = `data:image/png;base64,${base64}`
        console.log(base64img.value);
	});
});
</script>

<style lang="scss" scoped></style>

3、打印出base64