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

相关推荐
吃瓜群众i32 分钟前
理解Javascript闭包
前端·javascript
Blucas1 小时前
《深入 PageSpy》二:入门指南
javascript·前端框架
六边形6661 小时前
Vue中的 ref、toRef 和 toRefs 有什么区别
前端·vue.js·面试
kovli1 小时前
红宝书第十八讲:详解JavaScript的async/await与错误处理
前端·javascript
吃瓜群众i1 小时前
javascript-对象及应用
前端·javascript
吃瓜群众i1 小时前
Javascript的核心知识点-函数
前端·javascript
没有鸡汤吃不下饭1 小时前
解决vite+vue3运行项目打开页面跳转很慢打不开需要刷新问题:optimized dependencies change. reloading
前端·vue.js·vite
yede1 小时前
使用Gird布局实现瀑布流效果
前端·javascript·css
几度泥的菜花1 小时前
优雅实现网页弹窗提示功能:JavaScript与CSS完美结合
开发语言·javascript·css
Moment2 小时前
在 React 里面实现国际化实现是太简单了 🙂‍↔️🙂‍↔️🙂‍↔️
前端·javascript·react.js