前言: 业务上有许多需要生成二维码并分享的场景，由于图片是挂载到七牛云上的，导致需要给每一个img加上onload事件，从而保证在调用html2canvas时能正常渲染出图片。这样重复的工作，让我不禁思考，我能不能只让我们团队的成员，在写业务的过程中，只专注于画DOM，而无需考虑这些繁琐的调用细节呢。
1. 先专注画DOM,书写对应的逻辑
如图所示，我们这次需要画的DOM十分简单，仅仅展示了一个名称加一张图片资源，但问题在于，名称和图片的资源都是通过接口请求而来的，那么在请求接口后，直接调用html2canvas进行渲染就行了吗？此时我们还需要考虑图片的加载问题，假设你的网速不好，图片加载的时候比较缓慢，那么你此时调用API后，是无法画出对应的图片的，因为此刻的图片还没渲染完成。那么很容易就能想到了，可以直接给img加上onLoad事件，监听图片是否渲染完成，如下所示
那么，如果是多张图片呢？那么我们每一个img上，都需要加上对应的onLoad事件进行监听。
然后当imgLoadNum等于3的时候，再进行绘制，此时需要写一个轮询。
经过上面的操作后，我已经感到了疲惫了，后续在调用API生成完图片后，还要多一个变量用来展示生成的图片路径，实在是太麻烦了。
2. 开始编写组件
开始思考，能不能只让开发者，画DOM就行了，无需给每个标签加上onLoad事件，无需写对应的轮询，调用相关的API。于是我把代码进行了对应的抽取，如下：
是不是看起来会更简洁多了，而且无需考虑对应的操作，那么就来看看实现吧
其实挺简单的，我会遍历对应元素下的img元素，为它们加上对应的监听函数。在组件内部做轮询，当图片生成成功后，我会将其替换成对应的img元素。
代码已经上传到codesandbox了，可以直接访问查看对应的效果。
3.使用Taro的注意事项
不知为何，Taro的Image元素，会让html2canvas一直报error load image的错误，虽然不影响使用，但控制台的输出也挺烦的。为了避免可能造成的bug,建议替换成原生的img标签。