给mpvue、vue 添加图片水印
产品大佬说：页面缺少了什么，有点空荡荡，然后巴拉巴拉巴拉一大堆…
最终就是要在页面上加 公司logo图片 的水印------分别在小程序和vue里面加。
我：好的吧~~
第一版： 我把图片直接当成背景色、平铺。ok解决了，真棒~~ 呵，这么容易的吗？天真！！！。
出现的问题：如果页面有图片的话，图片会盖住背景色（也就是水印），然后图片上就没有水印，这样不阔以哦。
所以产品的的需求就是水印要在最顶层，不管是什么都盖不住水印（没错，不能被封印的水印）。那么问题来了：如果用canvas把它盖在最顶层，那么页面只能上下滑动，不能进行点击跳转等事件处理。 愁死我了！！！
第二版： 然而，我还是整出来了，水印在最上面。这里用到了 CSS3的一个新样式：pointer-events实现的。
一、在vue中加 图片水印
emmmmm 说下，图和文字还有水印是随便拉扯的，不好看，将就下，重点是代码~~
新建一个watermark.js：
'use strict'
var watermark = function () {
if(!document.getElementById('secondCanvas')){//每次页面刷新会重复加载，所以进行判断下，避免加载多个canvas进行叠加
console.log('呀! 有水印~')
var fisrst = document.createElement('canvas'),//一张图片
second = document.createElement('canvas')//平铺的图片
fisrst.width = 130
fisrst.height = 180
fisrst.id = 'firstCanvas'
fisrst.style.display ='none'
second.id = 'secondCanvas'
second.style.pointerEvents = 'none'
second.style.margin = '0 0 0 20px'
second.style.opacity = 0.3
var imgObj = new Image()
imgObj.src= './img/rocket.png'//水印图片
imgObj.onload = function () {
var canvasFirst,canvasSecond,ctxFirst,ctxSecond
canvasFirst = document.getElementById('firstCanvas')
canvasSecond = document.getElementById('secondCanvas')
ctxFirst = canvasFirst.getContext('2d')
ctxSecond = canvasSecond.getContext('2d')
ctxFirst.drawImage(imgObj,0,0,70,50);//把图片绘制到画布上
canvasSecond.width = document.documentElement.clientWidth;//获取可视宽度
canvasSecond.height = document.documentElement.clientHeight;
ctxSecond.clearRect(0,0,canvasSecond.width,canvasSecond.height);//清画布
var pat = ctxSecond.createPattern(canvasFirst, "repeat");//在指定的方向上重复指定的元素
ctxSecond.fillStyle = pat;
ctxSecond.fillRect(0,0, canvasSecond.width, canvasSecond.height);//绘制填充
}
document.body.appendChild(fisrst);
document.body.appendChild(second);
}
}
export default watermark
在main.js文件中进行vue全局配置：
import Watermark from './watermark.js';
Vue.prototype.Watermark = Watermark;
在需要引入水印的 .vue 页面中：
<script>
export default {
mounted(){
this.Watermark()//直接调用
}
}
</script>
<style>
#secondCanvas{
position:fixed;
z-index:999;
top:0;
}
</style>
vue中结果图如下：
二、在小程序中加 图片水印
先说下我这个是mpvue小程序，不是纯小程序。
做完了vue中的水印，我以为只要把vue的代码搬到小程序中就ok了，然而并不是这样子！！！
becouse 小程序中不能对dom进行操作，不能对dom进行操作，不能对dom进行操作……
所以又得重新写代码，思路也改变了，不变的是还是用canvas。
新建一个 watermark.vue 组件：
<template>
<div class="watermark">
<canvas canvas-id='myCanvas' style='width:375px!important;height:667px!important;'></canvas>
</div>
</template>
<script>
export default {
mounted(){
this.watermark()
},
methods:{
watermark(){
var ctx = wx.createCanvasContext("myCanvas");
for (let j = 1; j < 10; j++) { //这个for循环代表纵向循环
ctx.beginPath();
ctx.drawImage("./img/rocket.png",0,150*j,70,50)//在画布上绘入图片
for (let i = 1; i < 10; i++) {//这个for循环代表横向循环，
ctx.beginPath();
ctx.drawImage("./img/rocket.png",150 * i, 150 * j,70,50)//在画布上绘入图片
}
}
ctx.draw();
},
},
}
</script>
<style>
.watermark{
position: fixed;
z-index: 999;
opacity: 0.3;
top: 0px;
pointer-events: none;
}
</style>
在需要水印的 .vue 页面中引入 watermark.vue 组件：
<template>
<div>
//这是内容自行编译
<watermark></watermark>//水印
</div>
</template>
<script>
import Watermark from './watermark.vue';
export default {
components:{
Watermark,
}
}
</script>
小程序结果图如下：
