小程序在线图片加水印

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

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

 

MarkwaterMark.js

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

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

　　demo.wxss

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 })
        })
    },