Commit 6b0240a7 by Tianqing Liu

feat: 优化截图水印功能

1 parent 313b5442
......@@ -135,11 +135,37 @@ export default {
});
}
},
screenshot(filename = '', format = 'png', quality = 0.92, type = 'base64') {
screenshot2(filename = '', format = 'png', quality = 0.92, type = 'base64') {
// TODO: 必须播放状态,才可获取水印
const originData = this._jessibuca.screenshot(filename, format, quality, type);
// TODO: 动态获取宽高
return getWatermarkCanvasImg(800, 480, '文安智能', originData);
},
screenshot(filename = '', format = 'png', quality = 0.92, type = 'base64') {
return new Promise((resolve, reject) => {
// 创建一个新的图片对象
const image = new Image();
// 当图像加载完成后执行
image.onload = () => {
// 创建一个 Canvas 元素
const canvas = getWatermarkCanvasImg(800, 480, '文安智能', image);;
// 将带有水印的 Canvas 转换回 base64
const watermarkedBase64 = canvas.toDataURL('image/png');
// 现在,watermarkedBase64 包含了带有水印的 base64 图像数据
// console.log(watermarkedBase64);
resolve(watermarkedBase64);
};
image.error = function() {
reject(new Error(null));
}
// 设置图像的 src 属性,加载图像
image.src = this._jessibuca.screenshot(filename, format, quality, type);
});
},
},
}
</script>
......
export function getWatermarkCanvasImg(width, height, text, imageData) {
export function getWatermarkCanvasImg(width, height, text, image) {
const canvas = document.createElement('canvas');
// 若不设置宽、高,无法渲染内容
canvas.width = width;
......@@ -12,9 +12,7 @@ export function getWatermarkCanvasImg(width, height, text, imageData) {
// 在 Canvas 上绘制原始图片
if (image) {
const imageEl = new Image();
imageEl.src = imageData;
ctx.drawImage(imageEl, 0, 0);
ctx.drawImage(image, 0, 0);
}
// 绘制水印文本
......@@ -51,5 +49,6 @@ export function getWatermarkCanvasImg(width, height, text, imageData) {
}
}
return canvas.toDataURL('image/png');
return canvas;
// return canvas.toDataURL('image/png');
}
......@@ -64,10 +64,11 @@ export default {
];
},
handleScreenshot() {
const result = this.$refs.vionPlayer.screenshot();
console.log('handleScreenshot', result);
this.base64Url = result;
this.$refs.vionPlayer.screenshot().then(data => {
console.log('handleScreenshot', data);
this.base64Url = data;
this.dialogVisible = true;
});
},
handlePause() {
this.$refs.vionPlayer.pause();
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!