4. 常见问题

微信小程序手机浏览空白

微信小程序绘制如果有图片绘制，手机浏览需要在后台添加downloadFile域名。

微信小程序无法真机调试

https://developers.weixin.qq.com/community/develop/doc/000eece1640d608df21bb19055b000

H5 端图片裁剪异常

H5 端绘制两个以上的ctx.drawRoundImage圆角图片时，创建的本地base64显示异常，建议当环境是h5时，将圆角图片限制为一个，或者uni动态编译展示img标签。

绘制完毕后没有效果

注意DrawPoster.build无法检测你所选择canvasId的是否正确，所以一定要确保与canvas-id和html中的canvas相同，在小程序端，由于会自动切换为type2d，必须得加上动态编译。

<!-- #ifdef MP-WEIXIN -->
<canvas id="canvas" type="2d" style="width: 300px; height: 300px" />
<!-- #endif -->
<!-- #ifndef MP-WEIXIN -->
<canvas canvas-id="canvas" id="canvas" style="width: 300px; height: 300px" />
<!-- #endif -->

绘制多个图片加载慢

如果觉得多个图片绘制await加载慢，可以使用Promise.all将一部分不需要处理图层覆盖的图片进行同步绘制。

dp.draw(async (ctx) => {
  // // 用户头像
  await ctx.drawRoundImage(headImgUrl, 39, 790, 90, 90, 100);
  await Promise.all([
    ctx.drawImage('/static/logo1.png', 20, 20, 35, 35),
    ctx.drawImage('/static/tp.png', 19, 86, 612, 459),
    ctx.drawImage('/static/bw.png', 188, 559, 274, 50),
    // // 用户二维码
    ctx.drawImage(codeImgUrl, 518, 780, 92, 92),
  ]);
});

需要注意的是：ctx.drawRoundImage不可以放在Promise.all当中，由于ctx.drawRoundImage内部会调用ctx.clip方法，在Promise.all中会与其他图片绘制产生冲突。从而导致圆角失效。