小程序在线图片加水印

参考：https://www.freesion.com/article/5065160137/

https://blog.csdn.net/Li_Ning21/article/details/134050960

 

MarkwaterMark.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125

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)                 })             }           }     }     // 加载图片     _loadImage(url) {         let self = this;         const image = this.node.createImage()         // 等待图片加载         return new Promise(resolve => {             image.onload = function() {                 console.log('image', image)                 resolve(image)             }             image.src = url // 要加载的图片 url         })     }     /* 初始化方法 */     _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()         })     }     /* 制作水印图片 */     async _markPicture(cb) {         const { bg ,color ,content , rotate } = this.options           let image = await this._loadImage('http://cdn.dev.terran.wxpai.cn/upload/sandbox/7ac60b90-ed6c-482f-8f96-4d8e322001ed.jpeg')         // 设置canvas宽高         let width = image.width;         let height = image.height;         this.node.width = width;         this.node.height = height;           this.context.fillStyle = bg || '#fff'         this.context.fillRect(0, 0, width, height)         this.context.fillStyle = color || '#000'         this.context.font = `normal 400 12px Microsoft JhengHei`         this.context.save()           this.context.drawImage(image, 0, 0, width, height)//在画布上绘入图片，参数含义移步手册。         this.context.rotate(Math.PI * rotate / 180 )           //对斜对角线以左部分进行文字的填充         for (let j = 1; j < 20; j++) {             // this.context.beginPath();             this.context.fillText(content, 0, (50 + j) * j);             for (let i = 1; i < 20; i++) {//这个for循环代表横向循环，                 // this.context.beginPath();                 this.context.fillText(content, (80 + j) * i, (50 + i) * j);             }         }         //对斜对角线以右部分进行文字的填充逻辑同上         for (let j = 0; j < 20; j++) {             this.context.fillText(content, 0, (50 + j) * j);             for (let i = 1; i < 20; i++) {                 this.context.fillText(content, -(80 + j) * i, (50 + i) * j);             }         }         this.context.restore()         this._savePicture(width , height, cb)     }     /* 生成图片 */     _savePicture(width , height, cb){         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

demo.wxml

?

1 2 3 4 5 6 7

<view>     <image src="{{url}}" mode="widthFix"></image>     <canvas       type="2d"       id="waterMark"     /> </view>

　　demo.wxss

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

onLoad(data) {         // /* 创建一个  makeWatermark 对象 */         const marker = makeWatermark({             'id': 'waterMark',                  /* canvas id */             'content': '我不是外星人',            /* 水印内容 */             'rotate': -45,                      /* 水印文案旋转角度*/             'bg': '#fff',                       /* 图片背景颜色 */             'color': '#ccc',                    /* 水印文字颜色 */         })         /* 调用make，生成图片 */         marker.make((url)=>{             /* url 为临时路径  */             const fileManage = wx.getFileSystemManager()             let base64 = 'data:image/jpg;base64,' + fileManage.readFileSync(url,'base64');             console.log('base64');             this.setData({ url: base64 })         })     },