微信小程序图片添加水印

页面布局

  <canvas class='canvas' style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;top:{{canvasHeight*2}}px;" canvas-id="firstCanvas"></canvas>

css

.canvas{
    position: fixed;
    top: 200%;
    left: 0;
    /* background: red;*/
    width: 100%;
    height: 100%; 
}

js

      var that = this;
            wx.chooseImage({
                count: 9, // 默认9
                sourceType: ['camera'],
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                success: function(res) {
                    // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
                    var arr = that.data.fileList
                    res.tempFilePaths.forEach(function(item) {
                        arr.push(item)
                    })
                    that.setData({
                        fileList: arr
                    })

                    //获取图片详细信息
                    wx.getImageInfo({
                        src: res.tempFilePaths[0],
                        success: (ress) => {

                            let date = util.formatTime(new Date());

                            let ctx = wx.createCanvasContext('firstCanvas')

                            that.setData({
                                canvasHeight: ress.height,
                                canvasWidth: ress.width
                            })

                            //将图片src放到cancas内，宽高为图片大小
                            ctx.drawImage(res.tempFilePaths[0], 0, 0, ress.width, ress.height)
                            //将声明的时间放入canvas
                            ctx.setFontSize(30) //注意：设置文字大小必须放在填充文字之前，否则不生效
                            ctx.setFillStyle('blue')
                            ctx.fillText(date, 0, 30)
                            ctx.strokeText(date, 0, 30)

                            ctx.draw(false, function() {
                                wx.canvasToTempFilePath({
                                    canvasId: 'firstCanvas',
                                    success: (res) => {
                                        wx.uploadFile({
                                            url: app.globalData.link + '/attach/upload',
                                            filePath: res.tempFilePath,
                                            name: 'file',
                                            formData: {

                                            },
                                            header: {
                                                "Content-Type": "multipart/form-data"
                                            },
                                            success: function(res) {
                                                res.data = JSON.parse(res.data)
                                                that.data.fileListIds.push(res.data.files[0].id)
                                            },
                                            fail: function(res) {},
                                            complete: function(res) {}
                                        })

                                    },
                                    fail: (e) => {
                                        console.log(e)
                                    }
                                })
                            })
                        }
                    })



                }
            })