电子签名生成的图片为空白，以及生成透明底签名图片转为白色底

电子签名如何解决生成的图片为空白的问题，以及生成透明底签名图片转为白色底

一、生成的图片为空白

项目有个新需求需要加电子签名，在实现的过程中遇到了许多问题，现用的插件笔画延迟非常严重，好不容易做完之后又得换一个插件；换了之后又发现画完图后产生的图片是空白的，百度之后才知道，生成图片调用的 uni.canvasToTempFilePath 接口必须要在 draw()回调使用
并且需要异步调用，在图片生成好之后再将它上传到服务器上，否则上传之后回显的图片就是空白的。
在 useCanvans.js 文件里

// 生成图片调用的uni.canvasToTempFilePath接口必须要在draw()回调使用，
// 否则可能生成空白图片，异步方法保证等待图片完成了再上传到服务器
function saveCanvas() {return new Promise((resolve, rej) => {params.ctx.draw(true,createFileUrl().then((res) => {resolve(res);}));});
}function createFileUrl() {return new Promise((resolve, rej) => {uni.canvasToTempFilePath({canvasId: 'handWriting',fileType: 'png',quality: 1, //图片质量success(res) {console.log(res.tempFilePath, 'canvas生成图片地址');resolve(res.tempFilePath);},fail: function (err) {console.log('图片生成失败：' + err);},});});
}

在需要调用生成图片 api 的文件里异步调用：

      saveCanvas().then((res) => {console.log('%c [ tempFilePath ]','font-size:13px; background:pink; color:#bf2c9f;',res);wx.uploadFile({...});});

二、透明底签名图片转为白色底

第一次尝试
使用第二个插件中，有一个函数的注释说明转背景为白色，但是引入这个插件后生成的图片却还是透明的

         onLoad() {this.ctx = uni.createCanvasContext("handWriting");this.$nextTick(() => {uni.createSelectorQuery().select('.handCenter').boundingClientRect(rect => {this.canvasWidth = rect.width;this.canvasHeight = rect.height;/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */this.setCanvasBg('#fff');}).exec();});},//设置canvas背景色  不设置  导出的canvas的背景为透明//@params：字符串  colorsetCanvasBg(color) {/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 *///rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度//这里是 canvasHeight - 4 是因为下边盖住边框了，所以手动减了写this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);// ctx.setFillStyle('red')this.ctx.setFillStyle(color);this.ctx.fill(); //设置填充this.ctx.draw(); //开画}

第二次尝试
一开始还以为是我理解错了，上面那个方法不是转白色底方法，于是又去网上找了其他方法：使用 wx.canvasGetImageData 和 wx.canvasPutImageData 改变图片的底色。

function toWhite() {console.log('%c [ width ]','font-size:13px; background:pink; color:#bf2c9f;');wx.canvasGetImageData({canvasId: 'handWriting',x: 0,y: 0,width: params.canvasWidth,height: params.canvasHeight,success(res) {console.log(res.width); // 100console.log(res.height); // 100console.log(res.data instanceof Uint8ClampedArray); // trueconsole.log(res.data.length); // 100 * 100 * 4var imageData = res.data;for (var i = 0; i < imageData.length; i += 4) {// 当该像素是透明的，则设置成白色if (imageData[i + 3] === 0) {imageData[i] = 255;imageData[i + 1] = 255;imageData[i + 2] = 255;imageData[i + 3] = 255;}}wx.canvasPutImageData({canvasId: 'handWriting',x: 0,y: 0,width: params.canvasWidth,height: params.canvasHeight,data: imageData,success(res) {console.log('%c [ toWhite ]','font-size:13px; background:pink; color:#bf2c9f;',res);},});},});
}

尝试过后发现还是不行，调试的错误信息显示传入的 width 为 0，这才发现前面获取宽高失败了，于是写死传入的宽高尝试了一下，发现还是不可以，但是让我想明白了为什么第一次尝试失败，也是因为在 setCanvasBg 函数中传入的宽高为 0。

this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);

传入正确的宽高之后果然成功了，但是要注意如果宽高是动态的话，一定要在设置底色前将宽高获取，否则生成的第一张签名还是透明底。
但是还是不明白为什么在初始化时获取宽高失败，很可能是由于this.$nextTick内的代码没有成功执行。