uniapp开发：微信小程序使用drawImage绘制第二次时不生效？

Question

微信小程序使用drawImage绘制第二次时不生效？

1.业务场景：合同签名需要将，1个底片+多个签名合成一张base64png图片。

2.问题点：
① 第一张背景图绘制成功，但签名没有绘制上去
②微信开发工具都能绘制出来，但是真机调试模式下签名绘制不出来，真是离谱

3.关键代码

4.微信开发者工具结果

5.真机调试结果

希望能有人帮解答下，开发工具模式和真机调试结果不一致

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

uniapp开发：微信小程序使用drawImage绘制第二次时不生效？

你遇到的问题是微信小程序使用 drawImage 绘制第二次时不生效，导致签名没有绘制上去。

根据你的业务场景，合同签名需要将一个底片和多个签名合成一张base64png图片。问题点是第一张背景图绘制成功，但签名没有绘制上去。

可能的解决方案是：

1. 检查签名的坐标是否正确，确保签名的坐标在背景图的可绘制范围内。
2. 检查背景图是否已经被绘制完成，如果已经绘制完成，需要使用 clearRect 方法清除背景图，然后重新绘制签名。
3. 检查签名的图片是否正确，如果签名的图片不正确，可能会导致签名不生效。

核心代码：

// 获取背景图
const bgImage = wx.createImageContext();

// 绘制背景图
bgImage.drawImage('background.png', 0, 0, 300, 300);

// 获取签名图片
const signatureImage = wx.createImageContext();

// 绘制签名
signatureImage.drawImage('signature.png', 100, 100, 50, 50);

// 绘制背景图和签名
bgImage.draw(signatureImage, 0, 0, 300, 300);

在上面的代码中，我们首先获取背景图和签名图片，然后使用 drawImage 方法绘制背景图和签名。最后，我们使用 draw 方法绘制背景图和签名。

如果你遇到其他问题，请提供更多的代码和错误信息，我将尽力帮助你解决问题。