vue使用canvas绘制文字水印背景
1、写watermarker.js文件
/** 水印添加方法 */
const setWatermark = (str1, str2) => {
const id = '1.23452384164.123412415'
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id))
}
const can = document.createElement('canvas')
// 设置canvas画布大小
can.width = 150
can.height = 80
const cans = can.getContext('2d')
cans.rotate(-20 * Math.PI / 180) // 水印旋转角度
cans.font = '15px Vedana'
cans.fillStyle = '#666666'
cans.textAlign = 'center'
cans.textBaseline = 'Middle'
cans.fillText(str1, can.width / 2, can.height) // 水印在画布的位置x,y轴
cans.fillText(str2, can.width / 2, can.height + 22)
const div = document.createElement('div')
div.id = id
div.style.pointerEvents = 'none'
div.style.top = '40px'
div.style.left = '0px'
div.style.opacity = '0.15'
div.style.position = 'fixed'
div.style.zIndex = '100000'
div.style.width = document.documentElement.clientWidth + 'px'
div.style.height = document.documentElement.clientHeight + 'px'
div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
document.body.appendChild(div)
return id
}
// 添加水印方法
export const setWaterMark = (str1, str2) => {
let id = setWatermark(str1, str2)
if (document.getElementById(id) === null) {
id = setWatermark(str1, str2)
}
}
// 移除水印方法
export const removeWatermark = () => {
const id = '1.23452384164.123412415'
if (document.getElementById(id) !== null) {
document.body.removeChild(document.getElementById(id))
}
}
2、在页面中使用
<template>
<div>
</div>
</template>
<script>
import { removeWatermark, setWaterMark } from '../utils/watermaker'
export default {
name: 'TestWaterMaker',
mounted () {
setWaterMark('liergou', '李二狗')
},
destroyed () {
removeWatermark()
}
}
</script>
<style scoped>
</style>
效果图如下
![](https://img-blog.csdnimg.cn/20210524215451603.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N0dWR5X0xpdmVfU3Vu,size_16,color_FFFFFF,t_70)
2、图片添加文字水印
<template>
<div>
<input type="file" id="uploadFile" class="clip" accept="image/*" @change="chooseImg">
<input type="text" placeholder="请输入你要添加的水印文字" class="water-text" v-model="text" @change="conformText()">
<div>
<img id="imgsrc" :src="imgsrc" :width="size">
<img id="imgTextUrl" :src="imgTextUrl" :width="size"><br/>
下载
<img id="imgUploadUrl" :src="imgUploadUrl" @click="downLoad()"><br/>
<div class="conform" @click="confirmImg()">合成图片</div>
</div>
</div>
</template>
<script>
export default {
name: 'TestWaterMaker1',
data () {
return {
imgsrc: '',
text: '',
size: 180,
imgTextUrl: '',
imgUploadUrl: ''
}
},
methods: {
// 上传图片
chooseImg (event) {
var file = event.target.files[0]
var reader = new FileReader()
reader.readAsDataURL(file)
const _this = this
reader.onload = function () {
_this.imgsrc = reader.result
}
_this.imgsrc = file
},
// 生成水印文字 canvas文字你可以设置为你喜欢的样式
conformText () {
var canvas = document.createElement('canvas') // 准备空画布
var ctx = canvas.getContext('2d')
ctx.font = '20px Georgia' // canvas字体
ctx.fillText(this.text, 10, 50)
var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0)
gradient.addColorStop('0', 'magenta')
gradient.addColorStop('0.5', 'blue')
gradient.addColorStop('1.0', 'red')
ctx.fillStyle = gradient
this.imgTextUrl = canvas.toDataURL('image/png')
},
// 合成图片
confirmImg (url) {
var canvasAll = document.createElement('canvas')
// const size = 180
canvasAll.width = this.size
canvasAll.height = this.size
var context = canvasAll.getContext('2d')
// 这是上传图像
var imgUpload = new Image()
var img1 = document.getElementById('imgsrc')
var img2 = document.getElementById('imgTextUrl')
context.drawImage(img1, 0, 0, img1.width, img1.height)
// 再次绘制
context.drawImage(img2, 0, 130, img2.width, img2.height)
const that = this
imgUpload.src = url
that.imgUploadUrl = canvasAll.toDataURL('image/png')
/* imgUpload.onload = function () {
// 绘制
context.drawImage(img1, 0, 0, img1.width, img1.height)
// 再次绘制
context.drawImage(img2, 0, 130, img2.width, img2.height)
// 回调
that.imgUploadUrl = canvasAll.toDataURL('image/png')
console.info(that.imgUploadUrl)
} */
},
downLoad () {
var a = document.createElement('a')
a.href = this.imgUploadUrl // 将画布内的信息导出为png图片数据
a.download = '水印图片' // 设定下载名称 如果不设置a.download 浏览器会尝试打开这张图片 而图片会下载失败
a.click() // 点击触发下载
}
}
}
</script>
<style scoped>
</style>
3、图片添加图片水印
例子两张图片叠加在一起
mounted () {
const img1 = new Image()
const that = this
img1.src = 'data:image/png;base64.........'
img1.onload = function () {
const img2 = new Image()
img2.src = 'data:image/png;base64.........'
img2.onload = function () {
const can = document.createElement('canvas')
can.width = 1080
can.height = 1080
const cans = can.getContext('2d')
cans.drawImage(img1, 0, 0, img1.width, img1.height)
cans.drawImage(img2, 0, 0, img2.width, img2.height)
that.imgUploadUrl = can.toDataURL('image/png')
}
}
}