Commit 313b5442 by Tianqing Liu

feat: 增加获取水印功能

1 parent 775070b9
......@@ -3,7 +3,8 @@
</template>
<script>
import { watermarkBase64 } from './data';
// import { watermarkBase64 } from './data';
import { getWatermarkCanvasImg } from './utils';
export default {
name: 'VionPlayer',
......@@ -61,15 +62,16 @@ export default {
controlAutoHide: this.controlAutoHide,
supportDblclickFullscreen: false,
showBandwidth: false, // 显示网速
watermarkConfig: {
// TODO: 水印功能暂不可用
/* watermarkConfig: {
image: {
src: watermarkBase64,
src: this.getWatermarkBase64(),
width: 150,
height: 48
},
right: 10,
top: 30
},
}, */
operateBtns: {
fullscreen: true,
screenshot: false,
......@@ -107,6 +109,10 @@ export default {
this.$emit('ptz-control', arrow);
});
},
getWatermarkBase64() {
const data = getWatermarkCanvasImg(150, 48, '文安智能');
console.log('getWatermarkBase64', data);
},
// 暴露方法
play(url) {
......@@ -129,9 +135,10 @@ export default {
});
}
},
screenshot(filename = '', format = 'png', quality = 0.92, type = 'base64') {
return this._jessibuca.screenshot(filename, format, quality, type);
const originData = this._jessibuca.screenshot(filename, format, quality, type);
// TODO: 动态获取宽高
return getWatermarkCanvasImg(800, 480, '文安智能', originData);
},
},
}
......
export function getWatermarkCanvasImg(width, height, text, imageData) {
const canvas = document.createElement('canvas');
// 若不设置宽、高,无法渲染内容
canvas.width = width;
canvas.height = height;
// canvas.height = this.height - 40; // 40为底部工具条
canvas.className = 'watermark';
console.log('createCanvas', canvas);
// 获取 Canvas 上下文
const ctx = canvas.getContext('2d');
// 在 Canvas 上绘制原始图片
if (image) {
const imageEl = new Image();
imageEl.src = imageData;
ctx.drawImage(imageEl, 0, 0);
}
// 绘制水印文本
ctx.font = '24px Arial';
ctx.fillStyle = 'rgba(255, 255, 255, 0.4)';
// 定义水印内容
const watermarkText = text;
// 定义水印间隔和边距
// TODO: 未兼容移动端
const watermarkIntervalX = 220; // 水印之间的水平间隔
const watermarkIntervalY = 220; // 水印之间的垂直间隔
const watermarkMarginX = 50; // 水印距离左边的边距
const watermarkMarginY = 180; // 水印距离顶部的边距
// 循环绘制水印
for (let x = watermarkMarginX; x < canvas.width; x += watermarkIntervalX) {
for (let y = watermarkMarginY; y < canvas.height; y += watermarkIntervalY) {
// 保存当前绘图状态以便恢复
ctx.save();
// 将坐标原点移动到水印位置
ctx.translate(x, y);
// 旋转文本
ctx.rotate(-Math.PI / 4); // 旋转-45度(以弧度表示)
// 绘制水印文本
ctx.fillText(watermarkText, 0, 0);
// 恢复绘图状态
ctx.restore();
}
}
return canvas.toDataURL('image/png');
}
......@@ -21,6 +21,10 @@
<button @click="handleDestroy">销毁</button>
<button @click="handleScreenshot">抓拍</button>
</div>
<el-dialog title="Image" :visible.sync="dialogVisible" width="90%">
<img v-if="dialogVisible" :src="base64Url" alt="base64" />
</el-dialog>
</div>
</template>
......@@ -37,6 +41,9 @@ export default {
playerType: 'live',
datetimeRange: [],
dialogVisible: false,
base64Url: '',
// 播放器相关
playUrl: 'https://rtmp01open.ys7.com:9188/v3/openlive/F16423875_1_1.flv?expire=1695279265&id=624619383494283264&t=75ae0260690eedd9d493ab1caf716fe3f10a3e4c9b6df59135e032d437cf187a&ev=100&supportH265=1',
}
......@@ -59,6 +66,8 @@ export default {
handleScreenshot() {
const result = this.$refs.vionPlayer.screenshot();
console.log('handleScreenshot', result);
this.base64Url = result;
this.dialogVisible = true;
},
handlePause() {
this.$refs.vionPlayer.pause();
......@@ -104,5 +113,9 @@ export default {
margin-right: 10px;
}
}
::v-deep(.el-dialog__body) {
text-align: center;
background-color: #CCC;
}
}
</style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!