需求：將頁面中指定區(qū)域進行截圖，區(qū)域中包含了圖片、文字、視頻。
第一步，先安裝
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部分：文章來源：http://www.zghlxwxcb.cn/news/detail-736388.html
let imageWrapper = ref(null) //要截圖的區(qū)域元素
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)
})
}
注意
剛開始我截出的圖只有文字，插圖和視頻部分是空白的，并沒有將頁面的插圖和視頻截進去，最終發(fā)現(xiàn)是跨域導(dǎo)致的，最簡單的方法當(dāng)然是給服務(wù)器加個支持跨域的請求頭。
但是我的圖片和視頻都是從阿里服務(wù)器拿的，是oss鏈接，加了支持跨域還是沒用。
最終試了一下，給視頻和圖片全部加上crossorigin，并且在訪問的地址后面加上隨機參數(shù)，防止瀏覽器緩存圖片，然后給html2canvas函數(shù)加上useCORS: true，使用跨越，這樣截出來的圖片就好啦~
文章來源地址http://www.zghlxwxcb.cn/news/detail-736388.html
到了這里，關(guān)于vue3中，使用html2canvas截圖包含視頻、圖片、文字的區(qū)域的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
