微信小程序Canvas添加水印字体,通过setGlobalAlpha设置字体透明度。

时间:2023-03-09 04:31:47
微信小程序Canvas添加水印字体,通过setGlobalAlpha设置字体透明度。

微信小程序自带的设置透明度只有setGlobalAlpha,但是CanvasContext.setGlobalAlpha设置透明度,是全局透明,整张图片都透明了。所以直接使用是不行的。

换种思路实现:就是把需要加水印的图片弄成拷贝成两张(大小尺寸一样),然后一张图片加水印字体并通过CanvasContext.setGlobalAlpha设置字体透明度,然后把两张图片合并就能实现照片不透明,字体透明。

微信扫一下小程序码可以查看实现的效果:

微信小程序Canvas添加水印字体,通过setGlobalAlpha设置字体透明度。

主要js代码逻辑:

 1  var ctx= wx.createCanvasContext(‘canvanid’);
2 var tempFilePaths =that.data.res.tempFilePaths;
3 //获取图片基本信息
4 wx.getImageInfo({
5 src:tempFilePaths[0],
6 success: function (res) {
7 var width = res.width;
8 var height = res.height;
11 ctx.drawImage(res.path,0,0,width,height);
12 ctx.beginPath();
13 ctx.setFontSize('15');
14 ctx.setFillStyle('red');
15 ctx.setGlobalAlpha('0.6');
16 ctx.fillText('加水印字体', 100,100);
17  wx.getImageInfo({
18           src:tempFilePaths[0],
19           success: function (res1) {
20            ctx.drawImage(res1.path,0,0,width,height);
21            ctx.draw();
22       }})
23
24 }
25 })