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 09e6edb5
authored
Sep 18, 2023
by
Tianqing Liu
Browse Files
Options
Browse Files
Tag
Download
Email Patches
Plain Diff
feat: 增加水印组件
1 parent
f20365b3
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
96 additions
and
0 deletions
h5/src/components/jPlayer/watermark.vue
h5/src/components/jPlayer/watermark.vue
0 → 100644
View file @
09e6edb
<
template
>
<div
ref=
"layer"
class=
"watermark-layer"
></div>
</
template
>
<
script
>
export
default
{
name
:
'WatermarkLayer'
,
props
:
{
width
:
Number
,
height
:
Number
,
text
:
String
,
},
mounted
()
{
if
(
this
.
width
&&
this
.
height
&&
this
.
text
)
{
this
.
init
();
}
},
methods
:
{
init
()
{
const
layerEl
=
this
.
$refs
.
layer
;
console
.
log
(
'layerEl'
,
layerEl
);
if
(
layerEl
)
{
const
canvas
=
this
.
createCanvas
();
layerEl
.
style
.
width
=
this
.
width
+
'px'
;
layerEl
.
style
.
height
=
this
.
height
+
'px'
;
layerEl
.
appendChild
(
canvas
);
}
},
/**
* image 图片对象,用于截图加水印
* 外部可直接调用,传入image对象,给图片加水印
*/
createCanvas
(
image
)
{
const
canvas
=
document
.
createElement
(
'canvas'
);
canvas
.
width
=
400
;
canvas
.
height
=
300
;
// canvas.height = this.height - 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.3)'
;
// 定义水印内容
const
watermarkText
=
this
.
text
;
// 定义水印间隔和边距
// TODO: 未兼容移动端
const
watermarkIntervalX
=
80
;
// 水印之间的水平间隔
const
watermarkIntervalY
=
80
;
// 水印之间的垂直间隔
const
watermarkMarginX
=
30
;
// 水印距离左边的边距
const
watermarkMarginY
=
0
;
// 水印距离顶部的边距
// 循环绘制水印
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
;
},
},
}
</
script
>
<
style
lang=
"scss"
scoped
>
.watermark-layer
{
::v-deep(canvas)
{
width
:
100%
;
height
:
100%
;
}
}
</
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