Skip to content
Toggle navigation
Projects
Groups
Snippets
Help
Toggle navigation
This project
Loading...
Sign in
蒋秀川
/
miniProject
Go to a project
Project
Repository
Issues
0
Merge Requests
0
Pipelines
Wiki
Settings
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Commit 313b5442
authored
Sep 20, 2023
by
Tianqing Liu
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
feat: 增加获取水印功能
1 parent
775070b9
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
81 additions
and
6 deletions
h5/src/components/vionPlayer/index.vue
h5/src/components/vionPlayer/utils.js
h5/src/views/player/vionPlayerDemo.vue
h5/src/components/vionPlayer/index.vue
View file @
313b544
...
...
@@ -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
);
},
},
}
...
...
h5/src/components/vionPlayer/utils.js
0 → 100644
View file @
313b544
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'
);
}
h5/src/views/player/vionPlayerDemo.vue
View file @
313b544
...
...
@@ -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
>
Write
Preview
Markdown
is supported
Attach a file
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to post a comment