建站
咨詢
售后
建站咨詢
新聞中心
??想了解更多關(guān)于開源的內(nèi)容，請?jiān)L問：??
創(chuàng)新互聯(lián)專注于營山網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供營山營銷型網(wǎng)站建設(shè)，營山網(wǎng)站制作、營山網(wǎng)頁設(shè)計(jì)、營山網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)公司服務(wù)，打造營山網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供營山網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
?? 開源基礎(chǔ)軟件社區(qū)??
??https://ost.??
前言
隨著搬運(yùn)工的逐漸增加,原創(chuàng)作者的利益收到了極大的影響.所以給圖片或視頻加上水印顯得極其重要,他可以有效的維護(hù)原創(chuàng)作者的版權(quán)防止盜版.本文分享一個由canvas和vue.js制作的圖片水印添加器。
效果展示
實(shí)現(xiàn)功能
自定義水印的文字及顏色,水印的位置,旋轉(zhuǎn)角度,大小,透明度,是否重復(fù)顯示,以及選擇為重復(fù)時可以選擇文字之間的水平間距和垂直間距,在設(shè)置為合適的圖片時點(diǎn)擊下載按鈕即可下載得到完成圖.如果覺得效果不好也可以點(diǎn)擊重置按鈕瞬間清屏.同時還支持logo圖水印。
實(shí)現(xiàn)思路
- 首先要引入vue.js以及elementui組件和樣式如下:
- html代碼如下:
水印顏色：
取色器：
- 位置
- 旋轉(zhuǎn)
- 重復(fù)
x間距
y間距
大小
透明度
保存圖片到本地
- 點(diǎn)擊按鈕后需要選擇上傳水印的圖片方法如下:
整體思路如下：
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
},下面先介紹一下項(xiàng)目中運(yùn)行到的一些函數(shù)方法：
（1）繪制背景函數(shù)，先拿到頁面中cavans元素,運(yùn)用drawImage()畫出背景。
//繪制圖片
drawimg(url){
let canvas = document.getElementById('canvasImg')
let context = canvas.getContext('2d')
context.drawImage(url, 0, 0)
},
（2） 繪制字體水印，同理先拿到canvas元素, 運(yùn)用到的方法：
- context.font：設(shè)置字體的大小。
- context.fillStyle：設(shè)置字體的類型顏色。
- repetition：判斷是否重復(fù) 。
- globalAlpha：設(shè)置字體的透明度。
- rotate：旋轉(zhuǎn)角度。
- translate：偏移位置。
- setposition()函數(shù)：設(shè)置水印的位置，主要用到了canvas.width和canvas.height。
- 中心點(diǎn)位置: 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) { //是否想要文字重復(fù),默認(rèn)不重復(fù)
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）清屏函數(shù)：如果在繪制過程中，對繪制的效果不滿意，想要重新繪制，就涉及到清屏操作，這里我是將輸入的文字（inputval）和選中的水?。╨ogo）設(shè)置為空再重新繪制, 代碼如下：
//重新設(shè)置
unset(){
//輸入的文字
this.inputval = null
//選中的水印
this.logo = null
this.loop()
},
（4）保存圖片代碼：繪制完成后就是保存圖片代碼,這里我是先創(chuàng)建了一個url元素用來存放下載的位置，文件名用new Date().getTime()+‘.png’ 這種形式來避免文件名重復(fù)，當(dāng)我們下載完成之后創(chuàng)建的url并沒有被釋放，此時就需要使用 URL.revokeObjectURL()方法將內(nèi)存釋放掉，此處做了一個延遲，讓url內(nèi)存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）功能函數(shù)：使用這種方法創(chuàng)建元素可以節(jié)約資源避免浪費(fèi)。
//----功能函數(shù)----
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;
}初始界面:
點(diǎn)擊按鈕選擇圖片后:
源碼地址
??https://gitee.com/touxing123/watermark-adder.git??。
總結(jié)
以上就是水印制作工具的全部過程了,最終效果跟上面一樣,主要就是運(yùn)用了canvas的一些屬性,歡迎各位開發(fā)者一起研究討論,希望本次分享對大家有所幫助。
??想了解更多關(guān)于開源的內(nèi)容，請?jiān)L問：??
?? 開源基礎(chǔ)軟件社區(qū)??
??https://ost.??。
當(dāng)前名稱：JS結(jié)合Canvas制作水印添加器小工具
轉(zhuǎn)載注明：http://www.dlmjj.cn/article/dpijhps.html
