手把手带你在小程序中实现保存图片组件功能（小程序开发图片保存到数据库）

手把手带你在小程序中实现保存图片组件功能（小程序开发图片保存到数据库）

本篇文章带大家聊聊

微信小程序

保存图片组件开发，希望对大家有所帮助！

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

许多微信小程序通过保存海报让用户去分享活动让更多的人知道自己的小程序，想必在平时开发小程序的时候应该有遇见过吧。【相关学习推荐：小程序开发教程】

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

接到任务后，我也先去万能互联网做了调查但是我的师兄和我说这个做过类似的但是当时只是单纯为了完成任务所以代码很乱，然后他就从其他项目的代码找呀找，然后找到了给我~~~ 而当时给到我的时间紧任务重呀只好先用着调整一些并且交差了。之后呢我就根据网上的文章然后一步一步踩坑，一步一步走实现了一个保存海报的组件。

思路

通过canvas绘制海报。通过uni.canvasToTempFilePath 将绘制好的 canvas转为图片。通过uni.saveImageToPhotosAlbum 将本地临时路径的图片保存至手机相册中。而我的想法是将所有采用的方法全部封装到组件中，只通过父组件去调用需要使用的方法和调整相关的参数即可。 具体使用可以查看示例代码

通过canvas绘制海报内容的顺序先后问题

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

注意uni.getImageInfo()

在绘制图片 和 头像时，组件通过uni.getImageInfo() 去获取图片的相关信息，调用该方法成功的前提是需要在微信小程序后台配置download域名和request域名当然最好把uploadFile域名也一起配置，防止出差错。但是官方给出的提示是配置download域名白名单即可，但是获取不到图片信息，这算是一个大坑了。如果没有进行相关配置，在调试时 或者 体验版 正式版等 打开了vconsole调试工具。uni.getImageInfo() 是可以获取到图片信息的，一旦关闭了vconsole uni.getImageInfo() 将会fail， 也是个坑。

本组件方法，变量介绍

props

canvasInfo Object （必需）canvasWidth 画布宽度canvasHeight 画布高度canvasId 画布标识isFullScreen Boolean为ture时表示画布为手机屏幕全屏，canvasInfo设置的宽高将失效。默认为 false

methods

canvasInit(callback) canvas初始化，所有有关画布canvas操作需在其回调函数操作。drawCanvasImage(context, src, _imageWidth, _imageHeight, dx, dy) 在canvas绘制一张图片drawCircularAvatar(context, url, _circularX, _circularY, _circularR) 在canvas绘制一张圆形图片drawText(options) 在canvas绘制单行、多行文本startDrawToImage(context, promiseArr, callback) 将canvas操作draw()进行绘制posterToPhotosAlbum(filePath) 保存至手机相册

示例代码

-

组件源码

效果

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。