创建img标签请求远程的图片
downloadIamge(imgsrc, name) {//下载图片地址和图片名
let image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute("crossOrigin", "anonymous");
image.onload = function() {
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
let a = document.createElement("a"); // 生成一个a元素
let event = new MouseEvent("click"); // 创建一个单击事件
a.download = name || "photo"; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.dispatchEvent(event); // 触发a的单击事件
};
image.src = imgsrc;
},
利用canvas截取视频里的图片
canvas 和 video 的大小要设为一样
截完图后 图片数据就在dataURL里了,可以当成正常的src用.
//创建且只创建一个不可见的canvas
let canvas = document.getElementById("picCanvas");
if (!canvas) {
canvas = document.createElement("canvas");
canvas.id = "picCanvas";
document.body.append(canvas);
}
canvas.style.setProperty("display", "none");
let context = canvas.getContext("2d");
let dataURL = '';
if (!!this.preview.videoPlayer) {
let playerDom = $('#my-player' + this.videoId)[0]
canvas.width = this.playerDivWidth;
canvas.height = this.playerDivHeight;
//用canvas的context 和 <video\> 进行截图
context.drawImage(playerDom, 0, 0, this.playerDivWidth, this.playerDivHeight); // 将video中的数据绘制到canvas里
dataURL = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
} else {
this.$message({type: 'error', message: '请在视频播放时进行截图'})
return
}
console.log(dataURL);
// if (!!this.preview.streamUrl)
this.$emit('command', {
order: "getPicture",
deviceCode: this.deviceCode,
streamUrl: this.preview.streamUrl,
dataURL: dataURL,
time: Date.now()
});
根据dataURL生成一个img 和 一个a 标签. time 当成id用了,用于标记
let id = self.$notify({
// title: '截图成功',
id: 1,
showClose: false,
duration: 0,
customClass: 'imgNotify' + time,
dangerouslyUseHTMLString: true,
message: "<div class='picture-container'>" +
"<img src='" + dataURL + "' class='smallimg' onclick=\"showBigImg('" + dataURL + "'," + time + ")\" alt=''/>" +
"<div class='button-div'><a href='" + dataURL + "' download=" + new Date(time).Format('yyyy-MM-dd__hh:mm:ss') + " onclick='closeNotify(" + time + ")' >下载</a></div>" +
"<div class='button-div'><a onclick='closeNotify(" + time + ")'>关闭</a></div>" +
"</div>",
});
评论区