Commit fbbeaea4 by Tianqing Liu

feat: 使用水印组件

1 parent 6512da16
<template> <template>
<div ref="jPlayer" class="j-player"></div> <div ref="jPlayer" class="j-player">
<watermark-layer v-if="watermark.text"
ref="watermarkLayer"
:width="watermark.width"
:height="watermark.height"
:text="watermark.text"
/>
</div>
</template> </template>
<script> <script>
import WatermarkLayer from './watermark.vue'
export default { export default {
name: 'JPlayer', name: 'JPlayer',
components: {
WatermarkLayer,
},
props: { props: {
type: { type: {
type: String, type: String,
...@@ -19,7 +31,7 @@ export default { ...@@ -19,7 +31,7 @@ export default {
type: Array, type: Array,
default: null, default: null,
}, },
watermark: { watermarkText: {
type: String, type: String,
default: '', default: '',
}, },
...@@ -36,6 +48,11 @@ export default { ...@@ -36,6 +48,11 @@ export default {
}, },
data() { data() {
return { return {
watermark: {
width: 0,
height: 0,
text: '',
},
// eslint-disable-next-line // eslint-disable-next-line
_iframeEl: null, _iframeEl: null,
} }
...@@ -110,7 +127,7 @@ export default { ...@@ -110,7 +127,7 @@ export default {
}, },
iframeReady(event) { iframeReady(event) {
console.log('iframeReady', event.target); console.log('iframeReady', event.target);
if (this.watermark && event.target) { if (this.watermarkText && event.target) {
const width = event.target.offsetWidth; const width = event.target.offsetWidth;
const height = event.target.offsetHeight; const height = event.target.offsetHeight;
this.createWatermark(width, height); this.createWatermark(width, height);
...@@ -118,62 +135,9 @@ export default { ...@@ -118,62 +135,9 @@ export default {
}, },
createWatermark(width, height) { createWatermark(width, height) {
console.log('createWatermark', width, height); console.log('createWatermark', width, height);
const canvas = this.createCanvas(width, height, this.watermark); this.watermark.width = width;
const commonIframeEl = this.$refs.jPlayer; this.watermark.height = height;
if (commonIframeEl) { this.watermark.text = this.watermarkText;
commonIframeEl.appendChild(canvas);
}
},
createCanvas(cwidth, cheight, watermark, image) {
const canvas = document.createElement('canvas');
canvas.width = cwidth;
canvas.height = cheight - 40; // 40为底部工具条
canvas.className = 'watermark';
console.log('createCanvas', canvas);
// 获取 Canvas 上下文
const ctx = canvas.getContext('2d');
// 在 Canvas 上绘制原始图片
if (image) {
ctx.drawImage(image, 0, 0);
}
// 绘制水印文本
ctx.font = '24px Arial';
ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
// 定义水印内容
// TODO: 此部分应动态获取
const watermarkText = watermark;
// 定义水印间隔和边距
const watermarkIntervalX = 300; // 水印之间的水平间隔
const watermarkIntervalY = 300; // 水印之间的垂直间隔
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;
}, },
formatDatetime(timestamp) { formatDatetime(timestamp) {
return parseInt(timestamp / 1000); return parseInt(timestamp / 1000);
...@@ -195,7 +159,7 @@ export default { ...@@ -195,7 +159,7 @@ export default {
// 当图像加载完成后执行 // 当图像加载完成后执行
image.onload = () => { image.onload = () => {
// 创建一个 Canvas 元素 // 创建一个 Canvas 元素
const canvas = this.createCanvas(image.width, image.height, this.watermark, image); const canvas = this.$refs.watermarkLayer.createCanvas(image);
// 将带有水印的 Canvas 转换回 base64 // 将带有水印的 Canvas 转换回 base64
const watermarkedBase64 = canvas.toDataURL('image/png'); const watermarkedBase64 = canvas.toDataURL('image/png');
...@@ -237,7 +201,7 @@ export default { ...@@ -237,7 +201,7 @@ export default {
height: 100%; height: 100%;
width: 100%; width: 100%;
position: relative; position: relative;
/deep/canvas.watermark { ::v-deep(.watermark-layer) {
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!