vue 设置水印
1、根据 用户自己设置的内容,进行水印展示2、创建 warterMark.js 用于放生成水印的操作, 在utils 文件下、let addWaterMark = (str,fontSize,color,fontWeight,style) => {let id = '1.23452384164.123412415'if (document.getElementById(id) !== nul
·
1、根据 用户自己设置的内容,进行水印展示
使用表单,利用双向绑定,来设置每一项的值
2、创建 warterMark.js 用于放生成水印的操作, 在utils 文件下、
let addWaterMark = (str,fontSize,color,fontWeight,style) => {
let id = '1.23452384164.123412415'
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id))
}
//创建一个画布
let can = document.createElement('canvas')
// 设置canvas画布大小
can.width = 150
can.height = 80
let cans = can.getContext('2d')
cans.translate(20,20) //
// cans.rotate(-20*Math.PI/180); 0
cans.rotate(style.angle * Math.PI / 180) // 水印旋转角度 0 水平 -90 垂直
cans.font = fontSize +'px ' + fontWeight
cans.globalAlpha = 0.5; // 设置图像透明度为0.2
cans.fillStyle = color //设置填充绘画的颜色、渐变或者模式
cans.textAlign = 'center' //设置文本内容的当前对齐方式
cans.textBaseline = 'Middle' //设置在绘制文本时使用的当前文本基线
cans.fillText(str,0, 0) // 在画布上绘制填色的文本(输出的文本,开始绘制文本的X坐标位置,开始绘制文本的Y坐标位置)
// cans.fillText(str2, can.width / 2, can.height + 22)//根据需求可添加多行水印,在方法中添加str2..
let div = document.createElement('div')
div.id = id
div.style.pointerEvents = 'none'
div.style.zIndex = '100000'
div.style.width = 200+ 'px'
div.style.height = 200 + 'px'
div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
document.getElementById('securityINfo-right-show').appendChild(div) // 添加到你想要展示的div
// document.body.appendChild(div)
return id
}
// 添加水印
export function setWaterMark(str,fontSize,color,fontWeight,direction) {
let id = addWaterMark(str,fontSize,color,fontWeight,direction)
if (document.getElementById(id) === null) {
id = addWaterMark(str,fontSize,color,fontWeight,direction)
}
}
// 移除
export function clearWatermark() {
let id = '1.23452384164.123412415'
if (document.getElementById(id) !== null) {
// document.body.removeChild(document.getElementById(id))
document.getElementById('securityINfo-right-show').removeChild(document.getElementById(id)) // 要和上面添加的div 一致
}
}
3、在组件中使用
import { setWaterMark,clearWatermark } from "@/utils/warterMark.js";
点击确认按钮调用:
setWaterMark(this.form.content,this.form.fontSize,this.form.color,this.form.fontStyle,this.style)
选择方向:
<el-select v-model="form.style" @change=changeStyle>
<el-option label="水平" value="1">水平</el-option>
<el-option label="垂直" value="2">垂直</el-option>
</el-select>
changeStyle(value){
console.log(value)
if(value == 1){ // 水平
this.style={
angle:0
}
} else { // 垂直
this.style={
angle:-90
}
}
}
4、展示效果
更多推荐
已为社区贡献1条内容
所有评论(0)