需求:将页面中指定区域进行截图,区域中包含了图片、文字、视频。
第一步,先安装
npm install html2canvas
第二步,在页面引入:
import html2canvas from 'html2canvas';
第三步,页面使用:
1)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部分:文章来源:https://www.toymoban.com/news/detail-736388.html
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
,使用跨越,这样截出来的图片就好啦~文章来源地址https://www.toymoban.com/news/detail-736388.html
到了这里,关于vue3中,使用html2canvas截图包含视频、图片、文字的区域的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!