只需要提供一个json就能轻松生成小程序分享图片支持矩形、图形圆角

只需要提供一个json就能轻松生成小程序分享图片支持矩形、图形圆角

在项目中使用该组件

weapp-easy-canvas是在小程序环境下，旨在帮助开发者简单绘制canvas的组件（只需要用户提供一个json格式的数据就自动绘制canvas）

安装

$ npm i weapp-easy-canvas -S --production

使用

usingComponents: { "k-canvas": "weapp-easy-canvas/index"}

// 绘制方法const canvas = this.selectComponent('#k-canvas')const options = {}canvas.draw(options).then(res => { // 绘制完成回调})

// 获取本地地址并且保存方法const canvas = this.selectComponent('#k-canvas')canvas.saveImage().then(res => { const wxSaveImageToPhotosAlbum = this.promisify(wx.saveImageToPhotosAlbum) wxSaveImageToPhotosAlbum({ filePath: res.tempFilePath }).then(res => { wx.showToast({ title: '已保存到相册' }) }).catch(res => { wx.showToast({ title: '请打开保存相册权限', duration: 1000, mask: true, icon: 'none' }) setTimeout(() => { wx.openSetting() }, 1000) })})

API

container (画板大小以及上左距离)

nodes (画板内容)

image（图片）

text（文本）

rect (矩形，线条)

options结构{ container: { width: width * 0.8, height: width * 1.2, left: width * 0.1, top: width * 0.1 }, nodes: [ { type: 'rect', background: '#fff', top: 0, left: 0, width: width * 0.8, height: width * 1.2 }, { type: 'image', src: 'https://img.alicdn.com/imgextra/i2/345698811/TB2yCrmXCCI.eBjy1XbXXbUBFXa_!!345698811.jpg', width: width * 0.8, height: width * 0.8, left: 0, top: 0 }, { type: 'rect', background: '#98A9C2', radius: 5, top: width * 0.8 + 10, left: 0, width: width * 0.8, height: 40 }, { type: 'text', content: '欧式抱枕奢华靠垫新古典靠包沙发靠包含芯办公室抱枕轻奢特价包邮', fontSize: 14, maxLine: 2, lineHeight: 20, color: '#fff', textAlign: 'left', width: width * 0.8 - 20, top: width * 0.8 + 10, left: 10 }, { type: 'text', content: '¥', fontSize: 12, maxLine: 1, color: '#ff5000', textAlign: 'left', width: 10, top: width * 0.8 + 86, left: 0 }, { type: 'text', content: '1320', fontSize: 20, maxLine: 1, color: '#ff5000', textAlign: 'left', width: 60, top: width * 0.8 + 80, left: 10 }, { type: 'text', content: '¥', fontSize: 12, maxLine: 1, color: '#999', textDecoration: 'line-through', textAlign: 'left', width: 10, top: width * 0.8 + 112, left: 0 }, { type: 'text', content: '9678', fontSize: 14, maxLine: 1, color: '#999', textDecoration: 'line-through', textAlign: 'left', width: 40, top: width * 0.8 + 110, left: 10 }, { type: 'image', src: 'https://img.alicdn.com/imgextra/i2/345698811/TB2yCrmXCCI.eBjy1XbXXbUBFXa_!!345698811.jpg', width: 80, height: 80, radius: 40, left: width * 0.8 - 80, top: width * 0.8 + 60 } ]}

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