当前位置: 首页 > 科技观察

JS结合Canvas做水印加法器小工具_0

时间:2023-03-16 13:18:27 科技观察

想了解更多开源请访问:51CTO开源基础软件社区https://ost.51cto.com搬运工,原作者的利益受到了很大的影响。因此,为图片或视频添加水印是极其重要的,可以有效维护原作者的版权,防止盗版。本文分享一篇canvas和vue的文章。js图像水印加法器。效果展示实现自定义水印的文字和颜色、水印的位置、旋转角度、大小、透明度、是否重复显示、文字之间的水平间距和垂直间距等功能您选择重复,并将其设置为合适的图片。单击下载按钮下载完成的图像。如果觉得效果不好,可以点击重置按钮,瞬间清屏。它还支持徽标图像水印。实现思路首先需要引入vue.js和elementui的组件和样式如下:html代码如下:水印颜色:颜色选择器:上传水印或标志图片

  • 重置水印
  • 位置
  • 旋转
  • 重复
  • x间距</div>y间距离
    大小
    透明度保存图片到本地点击按钮后需要选择上传水印的图片如下:整体思路如下:loop(){this.clear()//1.清除画布if(this.imgnode)this.drawimg(this.imgnode)//2.判断图片是否上传,绘制图片if(this.inputval)this.drawtext(this.inputval)//3.判断输入框是否有文字和绘制Textif(this.logo)this.drawlogo(this.logo)//4.判断是否添加logo图片,有则绘制logo},下面介绍一下项目中运行的一些函数和方法:(1)绘制背景函数,首先获取页面中的cavans元素,使用drawImage()绘制背景//绘制图片drawimg(url){letcanvas=document.getElementById('canvasImg')letcontext=canvas.getContext('2d')context.drawImage(url,0,0)},(2)绘制字体水印,同样先获取canvas元素,使用方法:context.font:设置字体大小。context.fillStyle:设置字体的字体颜色。repetition:判断是否重复。globalAlpha:设置字体的透明度。rotate:旋转角度。翻译:偏移位置。setposition()函数:设置水印的位置,主要使用canvas.width和canvas.height。居中位置:strarr=[canvas.width/2,canvas.height/2]。左上角位置:strarr=[0,0]。通过改变x,y来将元素放置在画布上的不同位置,绘制logo水印也是如此。//绘制字体水印drawtext(value){letcanvas=document.getElementById('canvasImg')//获取cavansletcontext=canvas.getContext('2d')letstrarr=this.setposition()context.font=this.value2+"px'宋体'"context.fillStyle=this.colorif(!this.repetition){//是否想要文字重现,默认不重现context.save()context.globalAlpha=this.value3context.translate(strarr[0],strarr[1])context.rotate((Math.PI/180)*(this.rotate*1))context.translate(-strarr[0],-strarr[1])context.fillText(值,strarr[0],strarr[1]+this.value2)context.restore()}else{for(leti=0;i{URL.revokeObjectURL(url)},5000);})},(5)作用:使用该方法创建元素可以节省资源,避免浪费。//----功能函数----loadImg(url){constimg=document.createElement('img')img.src=urlreturnimg},css代码如下:*{margin:0;填充:0;}.title{字体大小:20px;边距:30px;颜色:#888;}canvas{背景颜色:#ccc;最大宽度:960px;}.cavansimg{宽度:230px;高度:50px;背景色:#409EFF;边界半径:5px;游标:指针;}.mycontainer{宽度:960px;文本对齐:居中;保证金:0自动;填充底部:20px;}.textstyle{宽度:100%;显示:弹性;证明内容:空格之间;对齐项目:居中;}.selectbox{显示:flex;顶部边距:20px;证明内容:空格之间;}.box{宽度:100%;显示:弹性;证明内容:空格之间;对齐项目:居中;弹性:1;颜色:#409EFF;}li{列表样式:无;}.btns{显示:弹性;证明内容:空格之间;左边距:20px;}.btns按钮{宽度:120px;高度:50px;右边距:30px;边界半径:10px;背景色:#409EFF;颜色:#fff;大纲:无;边框:无;}.colorselect{border-radius:5px;宽度:80px;高度:40px;大纲:无;边框:无;}.canvastext{高度:40px;宽度:150px;边界半径:5px;文本缩进:10px;边框:1px实心#409EFF;边框:无;大纲:无;}.centerselect{保证金:200;显示:弹性;证明内容:空格之间;颜色:#409EFF;}.centerselectli{高度:50px;行高:50px;span{显示:内联块;}.smallprant{位置:相对;}html,body{user-select:none;}.block{width:150px;}初始界面:点击按钮选择图片后:源地址https://gitee.com/touxing123/watermark-adder.git综上所述,以上就是水印制作工具的全过程,最终效果是一样的如上,主要是利用了canvas的一些属性,欢迎各位开发者一起学习讨论,希望这次分享对大家有所帮助。了解更多开源信息,请访问:51CTO开源基础软件社区https://ost.51cto.com。