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

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

第一步,先安装

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,使用跨越,这样截出来的图片就好啦~

相关推荐
记得早睡~2 小时前
leetcode51-N皇后
javascript·算法·leetcode·typescript
小小鸭程序员4 小时前
Vue组件化开发深度解析:Element UI与Ant Design Vue对比实践
java·vue.js·spring·ui·elementui
拉不动的猪4 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya4 小时前
react redux的学习,单个reducer
前端·javascript·react.js
陌路物是人非4 小时前
SpringBoot + Netty + Vue + WebSocket实现在线聊天
vue.js·spring boot·websocket·netty
Liudef064 小时前
deepseek v3-0324 Markdown 编辑器 HTML
前端·编辑器·html·deepseek
拉不动的猪4 小时前
uniapp与React Native/vue 的简单对比
前端·vue.js·面试
加瓦点灯4 小时前
观察者模式:解耦对象间的依赖关系
开发语言·javascript·观察者模式
z_mazin5 小时前
Chrome开发者工具实战:调试三剑客
前端·javascript·chrome·网络爬虫
sen_shan6 小时前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单