JS结合Canvas制作水印添加器小工具
想了解更多关于开源的结合内容，请访问：
51CTO 开源基础软件社区
https://ost.51cto.com
前言
随着搬运工的制作逐渐增加,原创作者的利益收到了极大的影响.所以给图片或视频加上水印显得极其重要,他可以有效的维护原创作者的版权防止盗版.本文分享一个由canvas和vue.js制作的图片水印添加器。
效果展示
实现功能
自定义水印的水印文字及颜色,水印的位置,旋转角度,大小,透明度,是否重复显示,以及选择为重复时可以选择文字之间的水平间距和垂直间距,在设置为合适的图片时点击下载按钮即可下载得到完成图.如果觉得效果不好也可以点击重置按钮瞬间清屏.同时还支持logo图水印。
实现思路
首先要引入vue.js以及elementui组件和样式如下:
html代码如下:
水印颜色：
取色器：
x间距
y间距
大小
透明度
整体思路如下：
loop () {
this.clear()//1.清空画布
if(this.imgnode)this.drawimg(this.imgnode)//2.判断是否上传了图片,有就绘制图片
if(this.inputval)this.drawtext(this.inputval)//3.判断输入框是否有文字,有绘制文字
if(this.logo)this.drawlogo(this.logo)//4.判断是否添加logo图片,有就绘制logo
},下面先介绍一下项目中运行到的一些函数方法：
（1）绘制背景函数，先拿到页面中cavans元素,工具运用drawImage()画出背景。
//绘制图片
drawimg(url){
let canvas = document.getElementById(canvasImg)
let context = canvas.getContext(2d)
context.drawImage(url,结合 0, 0)
},（2） 绘制字体水印，同理先拿到canvas元素,制作 运用到的方法：
context.font：设置字体的云服务器大小。context.fillStyle：设置字体的水印类型颜色。repetition：判断是添加否重复 。globalAlpha：设置字体的工具透明度。rotate：旋转角度。结合translate：偏移位置。制作setposition()函数：设置水印的水印位置，主要用到了canvas.width和canvas.height。添加中心点位置: strarr = [canvas.width / 2,工具 canvas.height / 2]。左上角位置: strarr = [0, 0]。通过改变x,y将元素放置在画布各个位置，绘制logo水印同理。
//绘制字体水印
drawtext(value){
let canvas = document.getElementById(canvasImg) //获取cavans
let context = canvas.getContext(2d)
let strarr = this.setposition()
context.font = this.value2+"px 宋体"
context.fillStyle = this.color
if (!this.repetition) { //是否想要文字重复,默认不重复
context.save()
context.globalAlpha = this.value3
context.translate(strarr[0], strarr[1])
context.rotate((Math.PI/180)*(this.rotate*1))
context.translate(-strarr[0], -strarr[1])
context.fillText(value, strarr[0], strarr[1]+this.value2)
context.restore()
} else {
for (let i=0 ; i < canvas.width ; i += (this.value2*this.inputval.length +this.value0)) {
for (let j = 0 ; j < canvas.height ; j += (this.value2 + this.value1)) {
context.save()
context.globalAlpha = this.value3
context.translate(strarr[0]+i, strarr[1]+j)
context.rotate((Math.PI/180)*(this.rotate*1))
context.translate(-strarr[0]-i, -strarr[1]-j)
context.fillText(value, (strarr[0])+i, (strarr[1])+j+this.value2)
context.restore()
}
}
}
},（3）清屏函数：如果在绘制过程中，对绘制的效果不满意，想要重新绘制，就涉及到清屏操作，这里我是将输入的亿华云计算文字（inputval）和选中的水印（logo）设置为空再重新绘制, 代码如下：
//重新设置
unset(){
//输入的文字
this.inputval = null
//选中的水印
this.logo = null
this.loop()
},（4）保存图片代码：绘制完成后就是保存图片代码,这里我是先创建了一个url元素用来存放下载的位置，文件名用new Date().getTime()+‘.png’ 这种形式来避免文件名重复，当我们下载完成之后创建的url并没有被释放，此时就需要使用 URL.revokeObjectURL()方法将内存释放掉，此处做了一个延迟，让url内存5秒后被释放。
//保存图片到本地
saveimg () {
let canvas = document.getElementById(canvasImg)
canvas.toBlob(blob => {
let url = URL.createObjectURL(blob)
let save_link = document.createElement(a);
save_link.href = url;
save_link.download = new Date().getTime()+.png;
let event = document.createEvent(MouseEvents);
event.initEvent("click", true, false);
save_link.dispatchEvent(event);
setTimeout(() => {
URL.revokeObjectURL(url)
}, 5000);
})
},（5）功能函数：使用这种方法创建元素可以节约资源避免浪费。
//----功能函数----
loadImg (url) {
const img = document.createElement(img)
img.src = url
return img
},css代码如下:
*{
margin: 0;
padding: 0;
}
.title{
font-size: 20px;
margin: 30px;
color:#888;
}
canvas{
background-color: #ccc;
max-width: 960px;
}
.cavansimg{
width: 230px;
height: 50px;
background-color: #409EFF;
border-radius: 5px;
cursor: pointer;
}
.mycontainer {
width: 960px;
text-align: center;
margin:0 auto;
padding-bottom: 20px;
}
.textstyle{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.selectbox {
display: flex;
margin-top: 20px;
justify-content: space-between;
}
.box{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex:1;
color: #409EFF;
}
li {
list-style: none;
}
.btns {
display: flex;
justify-content: space-between;
margin-left: 20px;
}
.btns button {
width: 120px;
height: 50px;
margin-right: 30px;
border-radius: 10px;
background-color: #409EFF;
color: #fff;
outline: none;
border: none;
}
.colorselect {
border-radius: 5px;
width: 80px;
height: 40px;
outline: none;
border: none;
}
.canvastext {
height: 40px;
width: 150px;
border-radius: 5px;
text-indent: 10px;
border:1px solid #409EFF;
border: none;
outline: none;
}
.centerselect{
margin:20 0;
display: flex;
justify-content: space-between;
color: #409EFF;
}
.centerselect li {
height: 50px;
line-height: 50px;
}
span {
display: inline-block;
}
.smallprant {
position: relative;
}
html,body { user-select: none;}
.block {
width: 150px;
}初始界面:
点击按钮选择图片后:
源码地址
https://gitee.com/touxing123/watermark-adder.git。
总结
以上就是水印制作工具的全部过程了,最终效果跟上面一样,主要就是运用了canvas的一些属性,欢迎各位开发者一起研究讨论,希望本次分享对大家有所帮助。
想了解更多关于开源的内容，请访问：
51CTO 开源基础软件社区
https://ost.51cto.com。
高防服务器