聊聊生成水印原理與插件編寫
作者： 前端Sharing
今天分享一個小程序生成水印的小技巧——canvas繪制背景圖，接下來我會詳細介紹繪制的細節。希望開發過微信小程序的同學可以把文章收藏起來，這樣如果以后遇到類似的需求，可以翻出來作為參考。
本文轉載自微信公眾號「前端Sharing」，作者前端Sharing。轉載本文請聯系前端Sharing公眾號。
一 前言
今天分享一個小程序生成水印的小技巧——canvas繪制背景圖，接下來我會詳細介紹繪制的細節。希望開發過微信小程序的同學可以把文章收藏起來，這樣如果以后遇到類似的需求，可以翻出來作為參考。
本文的插件同樣適用于Taro，uniapp，原生等構建的小程序項目，項目demo是采用Taro-Vue構建的。
我們先來看看demo效果。
二 原理實現
canvas繪制背景圖這個方案原理本質上是非常簡單的，就如把大象放冰箱一共分成三步那樣簡單????。
- 第一步冰箱門打開，因為這個功能是前端實現的，而且是canvas畫出來的，所以我們需要海報的基礎配置，比如canvas海報寬高，文字內容，文字顏色，海報文字的旋轉角度等。
- 第二步把大象??放進去，canvas得到配置，繪制水印底圖。
那么問題來了，我們繪制的底圖是整張水印底圖嗎?
答案是否定的。我們只需要畫一個模版圖片就可以了，如下圖所示：
但是為了讓水印填充整個手機屏幕，我們需要將水印圖片作為背景圖片，然后設置background-repeat:repeat;就可以了。
- 第三步把冰箱門關上，我們通過canvas生成的圖片，將圖片填充整個屏幕就可以了。
三 細節實現
demo樣板
canvas模版接下來我們開始實現具體的細節，首先我們頁面放入一個
- <view
- class="markBox"
- :style="{ backgroundImage: `url(${url})` }"
- >
- <canvas
- v-show="isShow"
- :id="settings.id"
- type="2d"
- :class="settings.id"
- :style="{ width:settings.width + 'px' , height : settings.height + 'px' }"
- />
- </view>
- 這里有一點值得注意，就是我們設置的type = '2d'最好不要用canvasId方式來操作canvas，包括獲取canvas實例，調用canvasToTempFilePathapi等，不然可能會失效。這里采用的是通過id方式，來獲取canvas實例的。
- 當我們繪制完成后，隱藏canvas，將view容器設置背景圖片，背景圖片就是canvas繪制形成的圖片。
- canvas寬度和高度是根據canvas的配置項添加的，所以我們要動態用style屬性設置寬高。
配置項
- export default {
- /* 前端生成水印 */
- name:"MakeWaterMark",
- data(){
- return {
- isShow:true,
- url:'',
- settings: {
- 'id': 'waterMark', /* canvas id */
- 'content': '我不是外星人', /* 水印內容 */
- 'width': 200, /* 圖片/canvas 寬度 */
- 'height': 200, /* 圖片/canvas 高度 */
- 'rotate': -45, /* 水印文案旋轉角度*/
- 'left':60, /* 水印文案相對圖片水平偏移量 */
- 'top':80, /* 水印文案相對圖片垂直偏移量 */
- 'fontSize': '15px', /* 水印文字大小 */
- 'fontFamily': 'Microsoft JhengHei', /* 水印文字樣式 */
- 'bg': '#fff', /* 圖片背景顏色 */
- 'color': '#ccc', /* 水印文字顏色 */
- 'fontWeight': 'normal', /* 水印文字寬度 */
- }
- }
- },
- }
樣式處理
- .markBox{
- position: fixed;
- left:0;
- right:0;
- bottom: 0;
- top:0;
- background-repeat:repeat ;
- }
- 給外層容器設置樣式，能夠讓水印圖片平鋪整個頁面。
插件核心代碼
插件的核心功能就是生成水印圖片，除此之外還要滿足兩個要求：
- 插件本身和頁面/組件低耦合。插件本身可以在任何組件中使用。
- 插件不受構建平臺的限制，就是既能在原生微信小程序中使用，也能在Taro，uniapp等構建工具中使用。
接下來我們看一下具體細節：
- function createPromise(callback){
- return new Promise((resolve,reject)=>{
- callback(resolve,reject)
- })
- }
- /**
- * 制作水印圖片
- */
- class MarkwaterMark{
- constructor(options){
- /* 初始化配置 */
- this.platform = null
- this.pixelRatio = null
- this.context = null
- this.options = options
- this.ready = createPromise(this._init.bind(this))
- /* 生成組件方法 */
- this.make = (cb) => {
- if(this.context){
- this._markPicture(cb)
- }else{
- this.ready.then(()=>{
- this.context && this._markPicture(cb)
- })
- }
- }
- }
- /* 初始化方法 */
- _init(next,fail){
- const { platform , pixelRatio } = wx.getSystemInfoSync()
- this.platform = platform
- this.pixelRatio = pixelRatio
- const query = wx.createSelectorQuery()
- query.select('#' + this.options.id ).fields({
- node: true,
- size: true
- }).exec((res)=>{
- let {
- node,
- } = res[0] || {}
- if (!node) return fail && fail()
- this.context = node.getContext('2d')
- this.node = node
- next()
- })
- }
- /* 制作水印圖片 */
- _markPicture(cb){
- const { width , height , bg ,color ,fontSize, fontFamily,fontWeight ,content , left, top ,rotate } = this.options
- this.node.width = (width || 200) * this.pixelRatio
- this.node.height =( height || 200) * this.pixelRatio
- this.context.scale(this.pixelRatio,this.pixelRatio)
- this.context.fillStyle = bg || '#fff'
- this.context.fillRect(0, 0, width, height)
- this.context.fillStyle = color || '#000'
- this.context.save()
- this.context.translate(left,top)
- this.context.rotate(Math.PI * rotate / 180 )
- this.context.font = `${fontWeight} 400 ${fontSize} ${fontFamily}`
- this.context.fillText(content, 0, 0)
- this.context.restore()
- this._savePicture(cb)
- }
- /* 生成圖片 */
- _savePicture(cb){
- const { width , height } = this.options
- wx.canvasToTempFilePath({
- x:0,
- y:0,
- width,
- height,
- destWidth:width*1,
- destHeight:height*1,
- canvas:this.node,
- success:function(res){
- cb && cb(res.tempFilePath)
- }
- })
- }
- }
- /**
- *
- * @param {*} options 配置項
- */
- function makeWatermark(options){
- if(!wx) return null
- return new MarkwaterMark(options)
- }
- module.exports = makeWatermark
核心功能流程分析：
- 第一步：暴露makeWatermark接口，可以實例化一個MarkwaterMark對象，實例化過程中本身先進行初始化配置，包裹一層Promise用于創建圖片。由于canvas操作中，很多方法都是異步的，所以用 createPromise 方法代理一層Promise。
- 第二步：MarkwaterMark對象上，有make方法，會獲取canvas實例，然后設置canvas畫布的寬高和縮放比，繪制水印canvas。
- 第三步：將canvas通過canvasToTempFilePath接口把canvas畫布轉化成臨時圖片，并把臨時圖片路徑通過callback形式，傳遞給業務組件或者頁面。
插件使用
在業務組件(上述demo)中，我們就可以使用上述插件了。具體參考如下：
- mounted(){
- Taro.nextTick(()=>{
- /* 創建一個 makeWatermark 對象 */
- const marker = makeWatermark(this.settings)
- /* 調用make，生成圖片 */
- marker.make((url)=>{
- /* url 為臨時路徑 */
- const fileManage = Taro.getFileSystemManager()
- let base64 = 'data:image/jpg;base64,' + fileManage.readFileSync(url,'base64');
- this.url = base64
- this.isShow = false
- })
- })
- },
重要細節：
這里還有一個比較重要細節就是，小程序中背景圖片一般都是網絡圖片或者base64圖片，對于臨時路徑的圖片在真機上是不顯示的。為了解決這個問題，我們需要把臨時圖片轉換成base64格式圖片。
- 通過 getFileSystemManager 以 base64方式訪問剛生成的臨時圖片，然后返回base64格式，接下來就可以把 base64 圖片設置為背景圖片了。
效果：
大功告成!!!
四 總結
通過本文我們學習了微信小程序生成水印的方式和流程。還有一些開發中的細節問題。感興趣的同學可以收藏起來，以備不時之需。
責任編輯：武曉燕
來源：
前端Sharing
