微信小程序Canvas添加水印字體,通過setGlobalAlpha設置字體透明度。


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

換種思路實現:就是把需要加水印的圖片弄成拷貝成兩張(大小尺寸一樣),然后一張圖片加水印字體並通過CanvasContext.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 })

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM