小程序图片添加文字水印

公司需求：小程序上传图片，添加文字水印
完成经过：一堆坑

1.官方文档

官方文档地址如下：https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html小程序有两种canvas写法，可不要搞混了

2.获取图片宽高

小程序添加文字，需要使用canvas重新绘制canvas图片，需要设定宽高。
wx.getImageInfo获取原始图片宽高

    getInfo() {        wx.getImageInfo({            src: this.data.url,             success(res) {                console.log(res.path)//可以获取图片路径，图片长宽等信息            }        })    }

3.不能使用线上url，只能使用本地临时图片路径

使用canvas的时候，如果是线上url会报错，必须使用临时图片路径(tempUrl)，格式如下：http://tmp/dLBG6wXVqhdBca99922121344e8d69bad5aa34f404ea.png获取办法：使用wx.getImageInfo方法，无论src是临时图片路径还是线上url，都返回临时图片路径

4.canvas基本用法

const query = wx.createSelectorQuery()    query.select('#myCanvas')      .fields({ node: true, size: true })      .exec((res) => {        const canvas = res[0].node        const ctx = canvas.getContext('2d')        const dpr = wx.getSystemInfoSync().pixelRatio        canvas.width = res[0].width * dpr        canvas.height = res[0].height * dpr        ctx.scale(dpr, dpr)        ctx.fillRect(0, 0, 100, 100)      })

5.canvas转为图片

transferCanvasToImage(canvas) {        const that = this;        wx.canvasToTempFilePath({            canvas: canvas,            success(res) {                console.log('canvas分享图片地址', res.tempFilePath)                var src = res.tempFilePath                that.setData({                    src                })            }      }) },

6.隐藏canvas不显示

公司需求：隐藏掉canvas不显示，但是可以使用。
结果：不能用使用wx:if和display:none，我没有找到好的办法，最后只能在外面加一层

7.demo核心代码

Page({    data: {        img: 'https://inews.gtimg.com/newsapp_bt/0/15084535902/1000',        canvasImg: '',//生成的canvasImg        canvasId: 'canvasId',    },    onLoad() {        this.getCanvas()    },    getCanvas() {        var mycenter = 0 //文字左右居中显示        var myheight = 0 //文字高度        const that = this        const query = wx.createSelectorQuery();        query.select('#' + this.data.canvasId).fields({ node: true, size: true }).exec((res) => {            console.log(res)            const canvas = res[0].node;            const ctx = canvas.getContext('2d')            new Promise(function (resolve) {                // 绘制背景图片                wx.getImageInfo({                    src: that.data.img, //网络图片,如果不行请换一个                    success(res) {                        console.log(res)                        var width = res.width                        var height = res.height                        mycenter = width / 2                        myheight = height                        canvas.width = width                        canvas.height = height                        const img = canvas.createImage();                        img.src = res.path;                        img.onload = () => {                            ctx.drawImage(img, 0, 0, width, height);                            resolve(true);                        }                    }                })            }).then(() => {                ctx.font = "500 32px Arial";                ctx.textAlign = 'center'                ctx.fillStyle = 'white';                ctx.fillText('adakfjlkawdjfklasjfklasjf', mycenter, myheight - 50)            }).then(function () {                that.transferCanvasToImage(canvas)            }).catch((err) => { })        })    },//canvas转为图片    transferCanvasToImage(canvas) {        const that = this;        wx.canvasToTempFilePath({            canvas: canvas,            success(res) {                that.setData({                    canvasImg: res.tempFilePath                })                console.log(that.data.canvasImg)            }        })    },})

参考资料：
1.官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

2. https://blog.csdn.net/qq_33769914/article/details/125148615
3. https://jishuin.proginn.com/p/763bfbd5f828