Commit 313b5442 by Tianqing Liu

feat: 增加获取水印功能

1 parent 775070b9
...@@ -3,7 +3,8 @@ ...@@ -3,7 +3,8 @@
</template> </template>
<script> <script>
import { watermarkBase64 } from './data'; // import { watermarkBase64 } from './data';
import { getWatermarkCanvasImg } from './utils';
export default { export default {
name: 'VionPlayer', name: 'VionPlayer',
...@@ -61,15 +62,16 @@ export default { ...@@ -61,15 +62,16 @@ export default {
controlAutoHide: this.controlAutoHide, controlAutoHide: this.controlAutoHide,
supportDblclickFullscreen: false, supportDblclickFullscreen: false,
showBandwidth: false, // 显示网速 showBandwidth: false, // 显示网速
watermarkConfig: { // TODO: 水印功能暂不可用
/* watermarkConfig: {
image: { image: {
src: watermarkBase64, src: this.getWatermarkBase64(),
width: 150, width: 150,
height: 48 height: 48
}, },
right: 10, right: 10,
top: 30 top: 30
}, }, */
operateBtns: { operateBtns: {
fullscreen: true, fullscreen: true,
screenshot: false, screenshot: false,
...@@ -107,6 +109,10 @@ export default { ...@@ -107,6 +109,10 @@ export default {
this.$emit('ptz-control', arrow); this.$emit('ptz-control', arrow);
}); });
}, },
getWatermarkBase64() {
const data = getWatermarkCanvasImg(150, 48, '文安智能');
console.log('getWatermarkBase64', data);
},
// 暴露方法 // 暴露方法
play(url) { play(url) {
...@@ -129,9 +135,10 @@ export default { ...@@ -129,9 +135,10 @@ export default {
}); });
} }
}, },
screenshot(filename = '', format = 'png', quality = 0.92, type = 'base64') { 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 @@ ...@@ -21,6 +21,10 @@
<button @click="handleDestroy">销毁</button> <button @click="handleDestroy">销毁</button>
<button @click="handleScreenshot">抓拍</button> <button @click="handleScreenshot">抓拍</button>
</div> </div>
<el-dialog title="Image" :visible.sync="dialogVisible" width="90%">
<img v-if="dialogVisible" :src="base64Url" alt="base64" />
</el-dialog>
</div> </div>
</template> </template>
...@@ -37,6 +41,9 @@ export default { ...@@ -37,6 +41,9 @@ export default {
playerType: 'live', playerType: 'live',
datetimeRange: [], 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', 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 { ...@@ -59,6 +66,8 @@ export default {
handleScreenshot() { handleScreenshot() {
const result = this.$refs.vionPlayer.screenshot(); const result = this.$refs.vionPlayer.screenshot();
console.log('handleScreenshot', result); console.log('handleScreenshot', result);
this.base64Url = result;
this.dialogVisible = true;
}, },
handlePause() { handlePause() {
this.$refs.vionPlayer.pause(); this.$refs.vionPlayer.pause();
...@@ -104,5 +113,9 @@ export default { ...@@ -104,5 +113,9 @@ export default {
margin-right: 10px; margin-right: 10px;
} }
} }
::v-deep(.el-dialog__body) {
text-align: center;
background-color: #CCC;
}
} }
</style> </style>
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!