微信小程序中上传图片添加水印功能

功能实现

参考文章： https://blog.csdn.net/yynikki/article/details/101763718

遇到的问题

实现过程中主要遇到的问题有以下两个：
1、在微信开发者工具上图片显示完全正常，但在真机上生成的图片不全（偶尔全偶尔不全）
2、真机拍的图片canvas画图后成的图片非常大，有的甚至几十M

解决图片显示不全

真机上图片偶尔正常偶尔不正常，主要是由于draw方法是异步的，有的时候图片还没完全加载成功，所以要在draw方法中添加定时器。

ctx.draw(true,setTimeout(function(){
    wx.canvasToTempFilePath({
        canvasId: 'shareCanvas',
        success: function(res){
            that.data.tmpPath = res.tempFilePath
        },
    })
},1000));

参考文章： https://blog.csdn.net/a323262/article/details/101484073.

解决生成的图片太大

加水印的操作是调取微信图片上传方法将图片上传，然后通过返回的临时图片地址读取图片的路径、宽、高，再将canvas画布设置成图片宽高，将图片完全绘制在画布上，最后使用wx.canvasToTempFilePath将canvas保存为图片。

这个过程导致生成的图片变大的主要原因是保存图片时没有设置destWidth和destHeight，微信官方开发文档中写到了，如果没有设置这两个参数，会默认使用canvas宽高，如果使用默认值(canvas的宽高值)，它的单位是rpx，输出的图片大小就会是预设大小的pixelRatio倍。

其次，保存图片的格式默认是png格式，png格式图片会比较大。

wx.canvasToTempFilePath({
	canvasId,
    quality: 0.5,
    fileType: 'jpg', // jpg文件尺寸小很多
    width,
    height,
    destWidth: canvasWidth, // 一定要设置 否则输出图片是原本的pixelRatio倍导致图片不全
    destHeight: canvasHeight,
    success: (res) => {},
    fail: (err) => {}
})

参考文章：
1、https://blog.csdn.net/waydong/article/details/113787288.
2、https://developers.weixin.qq.com/community/develop/doc/00000e8f4783601f6a397189b56c00?jumpto=comment&commentid=000aecb1778b00df6b39f040a584.