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

手把手带你在小程序中实现保存图片组件功能
本篇文章带大家聊聊微信小程序保存图片组件开发，希望对大家有所帮助！

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

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

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

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

思路首先声明下组件采用的是uniapp，具体实现了可以绘制图片、绘制文字以及保存海报至相册的基本功能，在开发中这些也完全够用了。

通过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) 保存至手机相册

示例代码<template><view><view class="savePosterItem"><image v-show="tempFilePath" :src="tempFilePath"></image><save-poster-com v-show="!tempFilePath" ref="savePoster" :canvasInfo="canvasInfo"></save-poster-com></view><button class="savePosterBtn" type="primary" @click="saveBtnFun">保存海报</button></view></template><script>import SavePosterCom from &#39;@/components/SavePosterCom/SavePosterCom.vue&#39;export default {components: {SavePosterCom},data() {return {canvasInfo: {canvasWidth: 620,canvasHeight: 950,canvasId: &#39;save-poster&#39;},tempFilePath: &#39;&#39;,canvasBgUrl: &#39;https://images.pexels.com/photos/4065617/pexels-photo-4065617.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500&#39;,avatarUrl: &#39;https://p9-passport.byteacctimg.com/img/user-avatar/4dbf31fa6dec9c65b78a70d28d843c04~300x300.image&#39;}},onLoad() {let {drawCanvasImage,drawCircularAvatar,drawText} = this.$refs.savePoster.$options.methodsthis.$refs.savePoster.canvasInit(({context,comThis}) => {// 获取画布宽高let canvasWH = comThis.canvasWH// 绘制海报背景图let promise_1 = drawCanvasImage(context, this.canvasBgUrl, canvasWH.canvasWidth, canvasWH.canvasHeight)// 必须先绘制玩海报背景图 再去操作其他绘制内容promise_1.then(res => {let promise_2 = drawCircularAvatar(context, this.avatarUrl, canvasWH.canvasWidth / 2, canvasWH.canvasHeight /7, 70)let promise_3 = drawText({context: context,text: &#39;皮皮虾仁&#39;,dx: (canvasWH.canvasWidth / 2) + 60,dy: canvasWH.canvasHeight / 4,fontSize: 30,fontColor: &#39;#5D4037&#39;})let promise_4 = drawCanvasImage(context, this.avatarUrl, 150, 150, (canvasWH.canvasWidth / 2) + 85, (canvasWH.canvasHeight -165)) this.$refs.savePoster.startDrawToImage(context, [promise_1,promise_2,promise_4], (tempFilePath) => {this.tempFilePath = tempFilePath})})})},methods: {saveBtnFun() {uni.showModal({title: &#39;保存海报&#39;,content: &#39;海报将被保存至相册中&#39;,confirmText: &#39;保存&#39;,success: (res) => {if(res.confirm) {this.$refs.savePoster.posterToPhotosAlbum(this.tempFilePath)}}})}}}</script><style>.savePosterItem {text-align: center;}.savePosterItem > image {width: 620rpx;height: 950rpx;}.savePosterBtn {margin-top: 40rpx;width: 80%;}</style>