Commit 8c461dca by Tianqing Liu

feat: 优化截图水印功能

1 parent 6b0240a7
......@@ -38,6 +38,11 @@ export default {
return {
// eslint-disable-next-line
_jessibuca: null,
player: {
height: 0,
width: 0,
},
}
},
mounted() {
......@@ -104,12 +109,19 @@ export default {
console.log("on-log", msg);
});
playerIns.on("videoInfo", (data) => {
console.log('width:', data.width, 'height:', data.height);
this.player.width = data.width;
this.player.height = data.height;
});
playerIns.on('ptz', (arrow) => {
// console.log('ptz', arrow);
this.$emit('ptz-control', arrow);
});
},
getWatermarkBase64() {
const data = getWatermarkCanvasImg(150, 48, '文安智能');
console.log('getWatermarkBase64', data);
},
......@@ -143,13 +155,18 @@ export default {
},
screenshot(filename = '', format = 'png', quality = 0.92, type = 'base64') {
return new Promise((resolve, reject) => {
// 如果是播放状态
if (!this.player.height || !this.player.width ) {
reject(new Error('invaild data'));
}
// 创建一个新的图片对象
const image = new Image();
// 当图像加载完成后执行
image.onload = () => {
// 创建一个 Canvas 元素
const canvas = getWatermarkCanvasImg(800, 480, '文安智能', image);;
const canvas = getWatermarkCanvasImg(this.player.width, this.player.height, '文安智能', image);;
// 将带有水印的 Canvas 转换回 base64
const watermarkedBase64 = canvas.toDataURL('image/png');
......@@ -159,7 +176,7 @@ export default {
resolve(watermarkedBase64);
};
image.error = function() {
reject(new Error(null));
reject(new Error('image loade fail'));
}
// 设置图像的 src 属性,加载图像
......
......@@ -117,6 +117,10 @@ export default {
::v-deep(.el-dialog__body) {
text-align: center;
background-color: #CCC;
> img {
max-width: 100%;
height: auto;
}
}
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!