在微信小程序中实现生成海报图并保存到相册

效果图镇楼：

技术依赖：

弹窗 (vant-weapp 提供的 van-popup 组件)
海报图 (wx-canvas-2d 工具)

弹窗组件的使用方式可以点击上面链接查看，本篇主要讲解海报图绘制方法。

首先下载依赖

npm install -S wx-canvas-2d

下载完依赖后也不要忘记用微信开发者工具构建一下npm。
使用 wx-canvas-2d 前，先要准备一个容器，请在需要绘制海报图的地方创建一个canvas，如下：

<canvastype="2d"id="poster-canvas"class="poster-canvas"style="width: 100%; height: 100%;"disable-scroll="{{ true }}"
/>

接下来就可以开始编写js代码部分了。第一步，先引入，然后实例化对象。

import WxCanvas2d from 'wx-canvas-2d'// 实例化对象
const canvas = new WxCanvas2d()

第二步，在canvas加载完毕后创建画布

// 创建
canvas.create({query: '.poster-canvas', // 必传，canvas元素的查询条件rootWidth: 750, // 参考设备宽度 (即开发时UI设计稿的宽度，默认375，可改为750)bgColor: '#fff', // 背景色，默认透明component: this, // 自定义组件内需要传 thisradius: 16 // 海报图圆角，如果不需要可不填
}).then(res => {// console.log(res)
}).catch(err => {console.log('[WxCanvas2d] Canvas create fail: ', err)
})

设置了 rootWidth 后，接下来绘制内容时填入的数值就直接是设计图上的实际值了。
最后一步，绘制内容，在你需要绘制的地方调用绘制方法 draw。

// 绘制
canvas.draw({series: [{type: 'image', // 图片url: item.img,x: 0,y: 0,width: 600,height: 600,mode: 'aspectFill' // 图片的裁剪方式，参考小程序 image 标签的 mode 属性},{type: 'text',text: item.name,x: 30,y: 620,color: '#222',fontSize: 30,fontWeight: 'bold',lineHeight: 42},{type: 'text',text: '￥',x: 30,y: 683,color: '#F25238',fontSize: 24,fontWeight: 'bold',lineHeight: 33},{type: 'text',text: item.price,x: 49,y: 672,color: '#F25238',fontSize: 34,fontWeight: 'bold',lineHeight: 48},{type: 'text',text: item.desc,x: 30,y: 787,color: '#969696',fontSize: 24,width: 390,lineHeight: 33,ellipsis: 2},{type: 'line',lineStyle: {dash: [7, 3],color: '#E9E9E9',width: 1},line: [{point: [30, 740]},{point: [30 + 540, 740]}]},{type: 'image',url: '../../img/qrcode.png',x: 450,y: 760,width: 120,height: 120}]
}).then(() => {console.log('绘制成功！')
}).catch(err => {console.log('绘制失败！', err)
})

type 属性是必填的，zIndex 属性可有可无。

基本上可以做到海报图需要的大多数功能了，绘制图片，绘制线段，绘制文字，文字换行，文字超出省略号，绘制矩形。
选择这个工具的优势主要在于其满足了绝大部分海报图所需的功能，而且非常小巧，使用方便，容易维护，对于有 2MB 限制的小程序来说，工具的体积大小是非常重要的一个指标。

除此以外，wx-canvas-2d 工具还十分人性化的集成了保存图片到相册的功能。

// 保存图片到相册
canvas.saveToAlbum({destWidth: 600,destHeight: 900
}).then(res => {wx.showModal({content: '图片已保存到相册，赶紧晒一下吧~'})
}).catch(err => {wx.showModal({content: '图片保存失败'})
})

看完有收获的点个赞再走~

在微信小程序中实现生成海报图并保存到相册相关推荐

微信小程序纯前端生成海报并保存本地
需求公司开发微信小程序,有一个海报页面,需要用户点击生成海报,可以将该该swipe-item 生成一个带二维码的图片,最终由纯前端实现! 技术调研因为小程序的打包限制,不可能将所有的图片都放在代码 ...
uniapp实现微信小程序端动态生成海报
背景: 基于uniapp实现微信小程序中商品详情的海报生成与保存效果图: 思路: 首先把海报上需要的内容准备好,比如用户头像,商品信息,二维码等.需要注意的是,因为二维码是动态生成的,所以需要后端传 ...
微信小程序中使用ECharts--折线图、柱状图、饼图等
微信小程序开发者的反馈,表示他们强烈需要像 ECharts 这样的可视化工具.但是微信小程序是不支持 DOM 操作的,Canvas 接口也和浏览器不尽相同. 因此,ECharts 团队和微信小程序官方 ...
微信小程序实现画布生成海报功能
微信小程序可以通过使用标签来实现生成海报的功能.以下是基本实现步骤: 1.在 WXML 文件中创建一个标签,并设置其宽度和高度属性.' <canvas canvas-id="myC ...
记一次微信小程序canvas 2d 生成海报问题
因项目需要,需要制作海报分享. 如: 事情总是不是那么顺利,canvas生成海报生成中遇到各种奇葩问题.一开始是 wx.canvasToTempFilePath 中获取不到canvas对象,调用返回 ...
微信小程序利用canvas生成海报-------图片为网络图片
根据我们老总的业务需求,迫不得已,我做了这个canvas绘制的海报,感觉基本上可以解决现在海报所遇到的大部分问题了,献给那些没有做过的小伙伴们,话不多说,先上我做的效果上代码 <style&g ...
uniapp开发微信小程序使用painter生成海报
最初绘制海报时是准备用canvas绘制,但是绘制遇到各种问题,且难度颇高,最后也没能绘制出来,也尝试过使用微信官方的 wxml-to-canvas,但需要传入wxml和样式,太为难我这个小小的后端开发 ...
微信小程序中base64图片的显示与保存
当我们拿到如下base64格式的数据时: 显示使用image标签,src属性添加data:image/png;base64, (注意:若imgData返回数据中含有data:image/png;ba ...
uniapp微信小程序开发，生成海报插件painter的使用
1.引入painter插件下载地址:https://github.com/Kujiale-Mobile/Painter 代码下载后,将component中的painter文件夹放入项目wxcompo ...

在微信小程序中实现生成海报图并保存到相册

在微信小程序中实现生成海报图并保存到相册相关推荐

最新文章

热门文章