目录
内容综述
本文将在后端同学提供了获取图片、提交描绘图片得到评分的基础上，完成这些功能。
获取要描绘的图片
昨天后端的同学给出了获取图片的接口：
获取的结果格式是：
这部分的逻辑，是之前我、后端、算法三位同学进行讨论得到的。后端将会整合所有的待描绘的图片，并按照一定的逻辑推荐给用户。用户描绘之后，提交描绘笔迹，交给后台。后端用算法同学提供的打分算法，给出用户的分数，由此可以积分。根据用户的积分，可以得到一个排行榜，这也是证明我们用户量的一个证据。
在之前，画板部分的背景图片都是静态的那张图片。现在给出了接口，就需要获取了。首先在draw.js中准备数据：
自然，要给出一个默认值。然后在wxml文件对应地方修改：
然后就需要封装方法了。这个还是比较容易的，只需要使用wx.request获取即可，注意仍然使用Promise格式：
然后在onShow中调用：
这样，在加载完成后的效果如下：
效果完成。
提交图片并获取评分
后端同学给出了提交图片的接口：
起初，我打算跟之前的方法一样，使用wx.request来提交图片文件。但与之前不同，按照之前的逻辑封装完毕之后，报了如下错误：
这是多部分文件没有边界的错误。与后端同学交流后，仍然没有解决问题。后来，查阅微信官方文档，发现了这个接口：
wx.uploadFile使用post请求，将本地资源上传到服务器。如果使用我自己封装的post方法有问题的话， 使用它应该就没有问题了。因此，使用wx.uploadFile重新封装方法：
通过name属性设置上传文件的名字，此外id、header都设置好，这样就封装了Promise格式的上传图片方法。然后需要封装一个给按钮调用的方法，在这个方法中应该调用uploadImage方法。
新的方法的逻辑与之前保存图片到本地的逻辑基本一样，需要获取画布像素数据，如果用户点击取消或者中间出现了问题，能够恢复原来的样子。此外，在提交成功后，需要获取新的背景图，并且清空画布。不同的是，在最终需要调用的是uploadImage，而不是保存到本地。具体实现如下：
按照Promise实现链式调用，逻辑还是非常清晰的。
然后，在页面中加入一个按钮：
它的点击事件回调函数是handleUploadImage。
此时实现页面效果如下：
进行测试，点击按钮时，发现出错。查找源头，发现错误在这里：
问题在于，获取到的obj.success是undefined，而obj是正常的。这就很奇怪了，这个问题我思考了很久。
后来发现，obj获取到的是json字符串格式，并不是json格式，那么obj.success自然是undefined。具体原因在官方文档中也没有体现，所以我没有查出为什么在这里不是json格式。总之，需要使用JSON.parse解码为json：
这样，再次进行测试：
效果成功。
总结
本文实现了小程序最关键的功能之一：画板的评分。接下来，将会完善排行榜，如果一切顺利，将会很快提交审核了。