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

我爱画页面2023-11-01 12:34

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

第一步，先安装

javascript 复制代码

npm install html2canvas

第二步，在页面引入：

javascript 复制代码

import html2canvas from 'html2canvas';

第三步，页面使用：

1）html部分：

html 复制代码

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

2）js部分：

javascript 复制代码

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 = imageDataURL
    console.log(screenshotUrl.value)
  })
}

注意

刚开始我截出的图只有文字，插图和视频部分是空白的，并没有将页面的插图和视频截进去，最终发现是跨域导致的，最简单的方法当然是给服务器加个支持跨域的请求头 。

但是我的图片和视频都是从阿里服务器拿的，是oss链接，加了支持跨域还是没用。

最终试了一下，给视频和图片全部加上crossorigin，并且在访问的地址后面加上随机参数，防止浏览器缓存图片，然后给html2canvas函数加上useCORS: true，使用跨越，这样截出来的图片就好啦~