微信小程序利用HTML5 Canvas绘制并保存至相册的步骤

本文档主要介绍了如何在微信小程序中利用HTML5的Canvas API进行绘图，并将绘制的结果保存到用户的系统相册。首先，作者提到在处理网络图片时，由于微信小程序的限制，需要配置下载域名，并通过`wx.getImageInfo`方法将其转换为临时路径。对于异步操作，作者倾向于使用`async/await`语法，因此提到了引入`regenerator`库来支持这种编程风格。 1. **微信小程序Canvas API基础**: - 在微信小程序中，HTML5的`<canvas>`元素可以用来进行图形绘制，这包括绘制线条、形状、文字等，通过JavaScript的`getContext`方法获取2D渲染上下文进行操作。 2. **封装微信API为Promise**: - 文档提供了几个重要的API封装示例： - `getWxImageInfo(imgPath)`：这个函数接收一个图片路径，通过`wx.getImageInfo`获取图片信息，并将其封装为一个Promise，用于后续处理。 - `getSelectQuery(queryStr)`：用于获取指定CSS查询结果的boundingClientRect，同样返回Promise。 - `canvasToTempFilePath(width, height, canvasId, fileType)`：此函数用于将Canvas内容转换为临时文件路径，参数包括宽度、高度、Canvas ID和输出的文件类型。 - `saveImageToPhotosAlbum(filePath)`：封装了`wx.saveImageToPhotosAlbum`，用于将图片保存到用户手机的照片库，输入是临时文件路径。 3. **注意事项与技巧**: - 提醒读者在使用网络图片时要确保已配置下载域名，以避免跨域问题。 - 强调了个人偏好使用`async/await`，但没有具体说明如何在`getWxImageInfo`和`canvasToTempFilePath`中应用，开发者需要自行查找或理解如何在微信小程序环境中使用这些语法。 4. **应用场景**: - 这些封装的函数可以用于各种场景，如绘制动态图表、游戏中的图像处理、交互式绘图工具等，最后用户可以方便地将这些图像保存，分享或者进一步与其他服务集成。 总结，这篇文章的核心技术点是微信小程序中使用HTML5 Canvas进行图形绘制，并通过封装微信原生API，将绘制内容保存到用户手机相册。开发者需要理解和掌握如何配置下载域名、使用异步操作以及正确调用这些封装的Promise函数，以便实现在微信小程序中的复杂绘图功能。