聊聊生成水印原理与插件编写

开发 前端
今天分享一个小程序生成水印的小技巧——canvas绘制背景图,接下来我会详细介绍绘制的细节。希望开发过微信小程序的同学可以把文章收藏起来,这样如果以后遇到类似的需求,可以翻出来作为参考。

[[407766]]

本文转载自微信公众号「前端Sharing」,作者前端Sharing。转载本文请联系前端Sharing公众号。

一 前言

今天分享一个小程序生成水印的小技巧——canvas绘制背景图,接下来我会详细介绍绘制的细节。希望开发过微信小程序的同学可以把文章收藏起来,这样如果以后遇到类似的需求,可以翻出来作为参考。

本文的插件同样适用于Taro,uniapp,原生等构建的小程序项目,项目demo是采用Taro-Vue构建的。

我们先来看看demo效果。

二 原理实现

canvas绘制背景图这个方案原理本质上是非常简单的,就如把大象放冰箱一共分成三步那样简单????。

  • 第一步冰箱门打开,因为这个功能是前端实现的,而且是canvas画出来的,所以我们需要海报的基础配置,比如canvas海报宽高,文字内容,文字颜色,海报文字的旋转角度等。
  • 第二步把大象??放进去,canvas得到配置,绘制水印底图。

那么问题来了,我们绘制的底图是整张水印底图吗?

答案是否定的。我们只需要画一个模版图片就可以了,如下图所示:

但是为了让水印填充整个手机屏幕,我们需要将水印图片作为背景图片,然后设置background-repeat:repeat;就可以了。

  • 第三步把冰箱门关上,我们通过canvas生成的图片,将图片填充整个屏幕就可以了。

三 细节实现

demo样板

canvas模版接下来我们开始实现具体的细节,首先我们页面放入一个

  1. <view 
  2.     class="markBox" 
  3.     :style="{ backgroundImage: `url(${url})` }" 
  4. >   
  5.     <canvas 
  6.       v-show="isShow" 
  7.       :id="settings.id" 
  8.       type="2d" 
  9.       :class="settings.id" 
  10.       :style="{ width:settings.width + 'px' , height : settings.height + 'px' }" 
  11.     /> 
  12. </view

 

  1. 这里有一点值得注意,就是我们设置的type = '2d'最好不要用canvasId方式来操作canvas,包括获取canvas实例,调用canvasToTempFilePathapi等,不然可能会失效。这里采用的是通过id方式,来获取canvas实例的。
  2. 当我们绘制完成后,隐藏canvas,将view容器设置背景图片,背景图片就是canvas绘制形成的图片。
  3. canvas宽度和高度是根据canvas的配置项添加的,所以我们要动态用style属性设置宽高。

配置项

  1. export default { 
  2.    /* 前端生成水印 */ 
  3.    name:"MakeWaterMark"
  4.    data(){ 
  5.        return { 
  6.            isShow:true
  7.            url:''
  8.            settings: { 
  9.                 'id''waterMark',                  /* canvas id */ 
  10.                 'content''我不是外星人',            /* 水印内容 */ 
  11.                 'width': 200,                       /* 图片/canvas 宽度 */ 
  12.                 'height': 200,                      /* 图片/canvas 高度 */  
  13.                 'rotate': -45,                      /* 水印文案旋转角度*/  
  14.                 'left':60,                          /* 水印文案相对图片水平偏移量 */ 
  15.                 'top':80,                           /* 水印文案相对图片垂直偏移量 */ 
  16.                 'fontSize''15px',                 /* 水印文字大小 */ 
  17.                 'fontFamily''Microsoft JhengHei', /* 水印文字样式 */ 
  18.                 'bg''#fff',                       /* 图片背景颜色 */  
  19.                 'color''#ccc',                    /* 水印文字颜色 */ 
  20.                 'fontWeight''normal',             /* 水印文字宽度 */ 
  21.             } 
  22.        } 
  23.    }, 

样式处理

  1. .markBox{ 
  2.     position: fixed; 
  3.     left:0; 
  4.     right:0; 
  5.     bottom: 0; 
  6.     top:0; 
  7.     background-repeat:repeat ; 
  • 给外层容器设置样式,能够让水印图片平铺整个页面。

插件核心代码

插件的核心功能就是生成水印图片,除此之外还要满足两个要求:

  • 插件本身和页面/组件低耦合。插件本身可以在任何组件中使用。
  • 插件不受构建平台的限制,就是既能在原生微信小程序中使用,也能在Taro,uniapp等构建工具中使用。

接下来我们看一下具体细节:

  1. function createPromise(callback){ 
  2.     return new Promise((resolve,reject)=>{ 
  3.         callback(resolve,reject) 
  4.     }) 
  5.  
  6. /** 
  7.  * 制作水印图片 
  8.  */ 
  9. class MarkwaterMark{ 
  10.     constructor(options){ 
  11.         /* 初始化配置 */ 
  12.        this.platform  = null  
  13.        this.pixelRatio = null 
  14.        this.context = null 
  15.        this.options = options  
  16.        this.ready = createPromise(this._init.bind(this))    
  17.        /* 生成组件方法 */ 
  18.        this.make = (cb) => {  
  19.           if(this.context){ 
  20.              this._markPicture(cb) 
  21.           }else
  22.               this.ready.then(()=>{ 
  23.                  this.context && this._markPicture(cb) 
  24.               }) 
  25.           }     
  26.        } 
  27.     } 
  28.     /* 初始化方法 */ 
  29.     _init(next,fail){ 
  30.        const { platform , pixelRatio } = wx.getSystemInfoSync() 
  31.        this.platform = platform 
  32.        this.pixelRatio = pixelRatio 
  33.        const query = wx.createSelectorQuery() 
  34.        query.select('#' + this.options.id ).fields({ 
  35.         node: true
  36.         sizetrue 
  37.       }).exec((res)=>{ 
  38.         let { 
  39.             node, 
  40.         } = res[0] || {}  
  41.         if (!node) return fail && fail() 
  42.         this.context = node.getContext('2d')     
  43.         this.node = node 
  44.         next() 
  45.       }) 
  46.     } 
  47.     /* 制作水印图片 */ 
  48.     _markPicture(cb){ 
  49.        const { width , height , bg ,color ,fontSize, fontFamily,fontWeight ,content , lefttop ,rotate } = this.options 
  50.        this.node.width = (width || 200) * this.pixelRatio 
  51.        this.node.height =( height || 200) * this.pixelRatio 
  52.        this.context.scale(this.pixelRatio,this.pixelRatio) 
  53.        this.context.fillStyle = bg || '#fff' 
  54.        this.context.fillRect(0, 0, width, height) 
  55.        this.context.fillStyle = color || '#000' 
  56.        this.context.save() 
  57.        this.context.translate(left,top
  58.        this.context.rotate(Math.PI * rotate / 180 ) 
  59.        this.context.font =  `${fontWeight} 400 ${fontSize} ${fontFamily}` 
  60.        this.context.fillText(content, 0, 0) 
  61.        this.context.restore()  
  62.        this._savePicture(cb) 
  63.     } 
  64.     /* 生成图片 */ 
  65.     _savePicture(cb){ 
  66.      const { width , height  } = this.options 
  67.        wx.canvasToTempFilePath({ 
  68.           x:0, 
  69.           y:0, 
  70.           width, 
  71.           height, 
  72.           destWidth:width*1, 
  73.           destHeight:height*1, 
  74.           canvas:this.node, 
  75.           success:function(res){ 
  76.              cb && cb(res.tempFilePath) 
  77.           } 
  78.        }) 
  79.     } 
  80. /** 
  81.  *  
  82.  * @param {*} options 配置项 
  83.  */ 
  84. function makeWatermark(options){ 
  85.   if(!wx) return null 
  86.   return new MarkwaterMark(options)  
  87.  
  88. module.exports = makeWatermark 

核心功能流程分析:

  • 第一步:暴露makeWatermark接口,可以实例化一个MarkwaterMark对象,实例化过程中本身先进行初始化配置,包裹一层Promise用于创建图片。由于canvas操作中,很多方法都是异步的,所以用 createPromise 方法代理一层Promise。
  • 第二步:MarkwaterMark对象上,有make方法,会获取canvas实例,然后设置canvas画布的宽高和缩放比,绘制水印canvas。
  • 第三步:将canvas通过canvasToTempFilePath接口把canvas画布转化成临时图片,并把临时图片路径通过callback形式,传递给业务组件或者页面。

插件使用

在业务组件(上述demo)中,我们就可以使用上述插件了。具体参考如下:

  1. mounted(){  
  2.       Taro.nextTick(()=>{ 
  3.           /* 创建一个  makeWatermark 对象 */ 
  4.           const marker = makeWatermark(this.settings) 
  5.           /* 调用make,生成图片 */ 
  6.           marker.make((url)=>{ 
  7.               /* url 为临时路径  */ 
  8.               const fileManage = Taro.getFileSystemManager() 
  9.               let base64 = 'data:image/jpg;base64,' + fileManage.readFileSync(url,'base64'); 
  10.               this.url = base64 
  11.               this.isShow  = false 
  12.           }) 
  13.       }) 
  14.   }, 

重要细节:

这里还有一个比较重要细节就是,小程序中背景图片一般都是网络图片或者base64图片,对于临时路径的图片在真机上是不显示的。为了解决这个问题,我们需要把临时图片转换成base64格式图片。

  • 通过 getFileSystemManager 以 base64方式访问刚生成的临时图片,然后返回base64格式,接下来就可以把 base64 图片设置为背景图片了。

效果:

大功告成!!!

四 总结

 

通过本文我们学习了微信小程序生成水印的方式和流程。还有一些开发中的细节问题。感兴趣的同学可以收藏起来,以备不时之需。

 

责任编辑:武晓燕 来源: 前端Sharing
相关推荐

2022-12-11 20:09:50

网络编程通信

2012-06-12 15:43:22

PHP

2021-02-08 21:40:04

SockmapBPF存储

2024-09-13 16:47:06

模型量化AI

2021-09-10 06:46:00

MySQL连接控制

2011-03-28 11:20:11

Nagios 插件

2011-04-06 16:02:26

Nagios插件

2023-06-30 07:51:44

springboot初始化逻辑

2011-06-27 17:24:37

Qt 插件

2022-02-06 22:13:47

VueVue3.0Vue项目

2022-06-21 07:51:06

Redis高可用哨兵进程

2024-05-09 09:55:08

2024-08-05 11:14:45

2023-11-07 08:13:53

分布式网络

2023-09-21 08:05:49

Mybatis插件开发

2011-06-27 16:59:19

Qt 动态 插件

2021-07-14 14:05:24

Fragment项目结构

2021-04-19 10:45:52

Webpack热更新前端

2022-07-26 07:14:52

Docker宿主命令

2022-02-07 21:49:19

串行通信UART
点赞
收藏

51CTO技术栈公众号