微信小程序实现canvas添加图文（水印效果）

由于项目需要，图片裁剪加个水印效果，很简单，写个简单的小例子，详情查看微信官方文档：

https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createCanvasContext.html

效果展示：

图片拼接：                水印： 

 

html：

js：

// 获取图片信息

wx.getImageInfo({

                src: app.globalData.image,

                success: (ress) => {

                    let ctx = wx.createCanvasContext('firstCanvas')

                    ctx.drawImage('要加水印或者图片拼接的主图', 0, 0, 190, 110) // 绘制图像到画布

                    // 图片那拼接

                    ctx.drawImage('你要添加的图片路径', 0, 0, 80, 48) // 绘制图像到原有画布，也就是图片拼接

                   // 图片加水印                   

                    ctx.fillText('你要添加的文字', 0, 50 * j) //在画布上绘制被填充的文本

                    ctx.setTextAlign('center') // 文字居中

                    ctx.setFillStyle('#a00b0f') // 文字颜色：黑色

                    ctx.draw(false, function () {

                        wx.canvasToTempFilePath({

                            canvasId: 'firstCanvas',

                            success: (res) => {

                                console.log(res) //这里获取加了水印的图片信息

                            },

                            fail: (e) => {

                                console.log(e)

                            }

                        })

                    })

                }

            })

最后，我们将加了水印效果或者图片拼接后的图片传给后台就可以了

ps：这里说一下css样式，生成的水印和拼接的图片宽高，最好与css样式表一致，这样图片会填满整个view盒子，