手把手带你实现小程序中保存图片组件的功能。

本文带你谈谈微信小程序保存图片组件的开发，希望对你有所帮助！

很多微信小程序通过保存海报让用户分享活动，让更多人了解他们的小程序。想必他们应该是平时开发小程序的时候认识的。【相关学习推荐:小程序开发教程】

今天我要分享的是我之前在公司做的一个保存海报的小程序的功能。首先我来描述一下之前在公司的要求是什么。公司的线上小程序会有一个长期的活动，推广新用户。每个用户都要有自己的海报，通过个人海报推广只是一种简单的方式。

接到任务后，我也去环球互联做了一个调查，但是我哥告诉我，这个也做过类似的东西，但是当时只是为了完成任务，代码很乱。然后他找了又找其他项目的代码，然后给我找~ ~ ~，但是当时给我的时间紧，任务重，我只好先调整一部分，做一个工作。之后我根据网上的文章一步步实现了一个保存海报的组件。

通过画布画海报。通过uni.canvasToTempFilePath将绘制的画布变成图片通过uni.saveImageToPhotosAlbum将本地临时路径的图片保存到手机相册我的想法是将所有采用的方法封装成组件，只通过父组件调用需要使用的方法并调整相关参数。有关详细信息，您可以查看示例代码。

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

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

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

该组件的方法和变量引入了propscanvasInfo对象(必需的)

画布宽度

CanvasHeight画布高度

CanvasId画布Id

isFullScreen布尔值

True表示画布为手机全屏，canvasInfo设置的宽度和高度将无效。

默认值为false。

Methodscanvasinit(回调)画布初始化，所有画布操作都需要在其回调函数中操作。

Drawcanvas Image (context，src，_ imagewidth，_ imageheight，dx，dy)在画布中绘制图片。

Drawcircular avatar (context，URL，_ circular x，_ circular y，_ circular r)在画布上绘制圆形图片。

DrawText(选项)在画布中绘制单行和多行文本。

StartToImage (context，promise arr，callback)绘制画布操作draw()

PosterToPhotosAlbum(文件路径)保存到手机相册。

示例代码

有关编程的更多信息，请访问:编程入门！！也就是小程序中保存图片组件的功能细节是手工拍摄的。请多关注主机参考其他相关文章！

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

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

本文由主机参考刊发，转载请注明：手把手带你实现小程序中保存图片组件的功能。 https://zhujicankao.com/76578.html