vue3中，使用html2canvas截图包含视频、图片、文字的区域

需求：将页面中指定区域进行截图，区域中包含了图片、文字、视频。

第一步，先安装

npm install html2canvas

第二步，在页面引入：

import html2canvas from 'html2canvas';

第三步，页面使用：
1）html部分：

<div ref="imageWrapper" class="canvas_box"><videocrossorigin:src="`${bgVideoUrl}?_=${Date.now()}`"autoplaymutedloop></video><imgcrossorigin="anonymous":src="`${bgSrc}?_=${Date.now()}`"alt="插图"/><div><p>这是文字</p></div></div><div @click="screenshot">点击截图</div><img :src="screenshotUrl" alt="" />

2）js部分：

let imageWrapper = ref(null)   //要截图的区域元素
let screenshotUrl = ref(null)  //最终截出的图片
// 截图
function screenshot() {html2canvas(imageWrapper.value, {useCORS: true,// 使用跨域}).then((canvas) => {const imageDataURL = canvas.toDataURL('image/png');screenshotUrl.value = imageDataURLconsole.log(screenshotUrl.value)})
}

注意

刚开始我截出的图只有文字，插图和视频部分是空白的，并没有将页面的插图和视频截进去，最终发现是跨域导致的，最简单的方法当然是给服务器加个支持跨域的请求头。
但是我的图片和视频都是从阿里服务器拿的，是oss链接，加了支持跨域还是没用。
最终试了一下，给视频和图片全部加上crossorigin，并且在访问的地址后面加上随机参数，防止浏览器缓存图片，然后给html2canvas函数加上useCORS: true，使用跨越，这样截出来的图片就好啦~