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 6b0240a7
authored
Sep 20, 2023
by
Tianqing Liu
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
feat: 优化截图水印功能
1 parent
313b5442
Show whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
35 additions
and
9 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 @
6b0240a
...
...
@@ -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
>
...
...
h5/src/components/vionPlayer/utils.js
View file @
6b0240a
export
function
getWatermarkCanvasImg
(
width
,
height
,
text
,
image
Data
)
{
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');
}
h5/src/views/player/vionPlayerDemo.vue
View file @
6b0240a
...
...
@@ -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
();
...
...
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