手把手指导你在小程序中实现保存图片的功能（小程序申请保存图片到相册）

本文带大家聊聊微信小程序保存图片的开发，希望对大家有所帮助！

很多微信小程序通过保存海报让用户分享活动，让更多人了解自己的小程序，这在平时开发小程序时肯定遇到过。【相关学习推荐:小程序开发教程】

今天分享一下我之前在公司做的一个小程序中保存海报的功能。首先，让我描述一下以前公司的需求是什么样的。该公司推出的小程序将有一个旨在推广新用户的长期活动。每个用户都应该有一张自己的海报，通过个人海报进行推广只是一种简单的方式。

接到任务后，我也去环球网做了调查，但我哥告诉我这个项目差不多，只是当时为了完成任务，代码比较乱，然后他搜索了其他项目的代码，然后给我找到了~ ~ ~但给我的时间紧，任务重，所以我必须先调整一下，做个工作。之后我根据网上的文章一步步踩坑，一步步实现了一个保存海报的组件。

创意通过画布绘制海报。通过uni.canvasToTempFilePath将绘制的画布转换为图片。通过uni.saveImageToPhotosAlbum将本地临时路径的图片保存到手机相册中我的想法是将所有采用的方法封装到组件中，只通过父组件调用要使用的方法并调整相关参数。具体使用可以看示例代码。

通过canvas绘制海报内容的顺序决定了使用promise对象绘制海报内容的顺序。promise.all（）方法用于执行画布的最后一步context.draw（）的绘制操作。

注意uni.getImageInfo（）绘制图片和头像时，组件通过uni.getImageInfo（）获取图片的相关信息。成功调用该方法的前提是在微信小程序后台配置下载域名和请求域名。当然，最好一起配置uploadFile域名，以防出错。但是官方提示是配置下载域名白名单，却无法获取图片信息，这是一个大坑。

如果没有相关配置，则在调试期间打开vconsole调试工具或体验版的正式版。Uni.getImageInfo（）可以获取图片信息，而一旦关闭vconsole uni.getImageInfo（）就会失败，这也是一个坑。

此组件方法，变量引入propscanvasInfo对象（必需）

画布宽度

画布高度画布高度

CanvasId帆布标志

is全屏布尔值

当它为真时，意味着画布是手机的全屏，canvasInfo设置的宽度和高度将无效。

默认值为false。

Methodscanvasinit（回调）画布初始化，所有与画布canvas相关的操作都需要在其回调函数中进行操作。

drawcanvasimage（context，src，_ imagewidth，_ imageheight，dx，dy）在画布上绘制图片。

绘制圆形头像（上下文、URL、_ circular x、_ circular y、_ circular r）在画布上绘制圆形图片。

DrawText（选项）在画布上绘制单行和多行文本。

startdrawtoimage（context，Promisearr，callback）绘制画布操作draw（）。

PosterToPhotosAlbum（文件路径）保存到手机相册。

示例代码

更多编程相关知识请访问:编程入门！！

这几篇文章你可能也喜欢：

• 教你如何在小程序中开发搜索输入框组件（小程序搜索框复制是什么意思）
• 如何在小程序中开发内容列表组件（如何做一个小程序项目）
• 手把手带你实现小程序中保存图片组件的功能。
• 教你如何在一个小程序中开发一个搜索输入框组件(小程序搜索框的简单实现)

本文由主机参考刊发，转载请注明：手把手指导你在小程序中实现保存图片的功能（小程序申请保存图片到相册） https://zhujicankao.com/107827.html