<div class="player_box_wrap">
<video
id="capture"
ref="playVideo"
width="100%"
height="100%"
:src="selectedVal.url"
controls
@seeked="durationchange"
></video>
</div>
<el-button type="primary" @click="takeScreenshot">截图</el-button>
async takeScreenshot() {
const self = this;
html2canvas(self.screenshotDom, {
allowTaint: true,
useCORS: true,
}).then((canvas) => {
const capture = canvas.toDataURL("image/png");
this.downloadLocal(capture);
let blob = this.changeToBlob(capture);
});
},
downloadLocal(capture) {
const link = document.createElement("a");
link.href = capture;
link.download = "图片编辑截图.png";
link.click();
},
changeToBlob(base64) {
let arr = base64.split(",");
let type = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return u8arr;
},
获取video必须在mounted设置setAttribute(“crossorigin”, “Anonymous”) 否则会报 toDataURL 错误
mounted() {
this.screenshotDom = document.getElementById("capture");
this.screenshotDom.setAttribute("crossorigin", "Anonymous");
},