微信小程序通过一个json实现分享朋友圈图片


Posted in Javascript onSeptember 03, 2019

写在前面

最近在做小程序,发现制作分享到朋友圈图片是每个项目必须的。遇到坑比较多,写起来也比较繁琐,也没有找到类似组件,所以就自己动手写了一个。

演示

微信小程序通过一个json实现分享朋友圈图片

左侧是 canvasdrawer 绘制的,右侧是UI给的图

微信小程序通过一个json实现分享朋友圈图片

特性

  • 简单易用 —— 一个 json 搞定绘制图片
  • 功能全 —— 满足 90% 的使用场景
    • 绘制文本(换行、超出内容省略号、中划线、下划线、文本加粗)
    • 绘制图片
    • 绘制矩形
    • 保存图片
    • 多图绘制
    • ...
  • 代码量小

体验

git clone https://github.com/kuckboy1994/mp_canvas_drawer

想在手机上使用配置自己的 appid 即可。

编译模式中已经为你配置好比较常用的两种模式:

  • 普通绘制,绘制单张分享图。
  • 多图绘制,连续绘制分享图

使用

git clone https://github.com/kuckboy1994/mp_canvas_drawer 到本地

把 components 中的 canvasdrawer 拷贝到自己项目下。

在使用页面注册组件

{
 "usingComponents": {
 "canvasdrawer": "/components/canvasdrawer/canvasdrawer"
 }
}

在页面 **.wxml 文件中加入如下代码

<canvasdrawer painting="{{painting}}" bind:getImage="eventGetImage"/>

painting 是需要传入的 json。 getImage 方法是绘图完成之后的回调函数,在 event.detail 中返回绘制完成的图片地址。

当前栗子中的 painting 简单展示一下。详细配置请看 API

painting

{
 width: 375,
 height: 555,
 views: [
 {
 type: 'image',
 url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531103986231.jpeg',
 top: 0,
 left: 0,
 width: 375,
 height: 555
 },
 {
 type: 'image',
 url: 'https://wx.qlogo.cn/mmopen/vi_32/DYAIOgq83epJEPdPqQVgv6D8bojGT4DrGXuEC4Oe0GXs5sMsN4GGpCegTUsBgL9SPJkN9UqC1s0iakjQpwd4h4A/132',
 top: 27.5,
 left: 29,
 width: 55,
 height: 55
 },
 {
 type: 'image',
 url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531401349117.jpeg',
 top: 27.5,
 left: 29,
 width: 55,
 height: 55
 },
 {
 type: 'text',
 content: '您的好友【kuckboy】',
 fontSize: 16,
 color: '#402D16',
 textAlign: 'left',
 top: 33,
 left: 96,
 bolder: true
 },
 {
 type: 'text',
 content: '发现一件好货,邀请你一起0元免费拿!',
 fontSize: 15,
 color: '#563D20',
 textAlign: 'left',
 top: 59.5,
 left: 96
 },
 {
 type: 'image',
 url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531385366950.jpeg',
 top: 136,
 left: 42.5,
 width: 290,
 height: 186
 },
 {
 type: 'image',
 url: 'https://hybrid.xiaoying.tv/miniprogram/viva-ad/1/1531385433625.jpeg',
 top: 443,
 left: 85,
 width: 68,
 height: 68
 },
 {
 type: 'text',
 content: '正品MAC魅可口红礼盒生日唇膏小辣椒Chili西柚情人',
 fontSize: 16,
 lineHeight: 21,
 color: '#383549',
 textAlign: 'left',
 top: 336,
 left: 44,
 width: 287,
 MaxLineNumber: 2,
 breakWord: true,
 bolder: true
 },
 {
 type: 'text',
 content: '¥0.00',
 fontSize: 19,
 color: '#E62004',
 textAlign: 'left',
 top: 387,
 left: 44.5,
 bolder: true
 },
 {
 type: 'text',
 content: '原价:¥138.00',
 fontSize: 13,
 color: '#7E7E8B',
 textAlign: 'left',
 top: 391,
 left: 110,
 textDecoration: 'line-through'
 },
 {
 type: 'text',
 content: '长按识别图中二维码帮我砍个价呗~',
 fontSize: 14,
 color: '#383549',
 textAlign: 'left',
 top: 460,
 left: 165.5,
 lineHeight: 20,
 MaxLineNumber: 2,
 breakWord: true,
 width: 125
 }
 ]
}

API

对象结构一览

{
 width: 375,
 height: 555,
 views: [
 {
 type: 'image',
 url: 'url',
 top: 0,
 left: 0,
 width: 375,
 height: 555
 },
 {
 type: 'text',
 content: 'content',
 fontSize: 16,
 color: '#402D16',
 textAlign: 'left',
 top: 33,
 left: 96,
 bolder: true
 },
 {
 type: 'rect',
 background: 'color',
 top: 0,
 left: 0,
 width: 375,
 height: 555
 }
 ]
}

数据对象的第一层需要三个参数: width、height、views。配置中所有的数字都是没有单位的。这就意味着 canvas 绘制的是一个比例图。具体显示的大小直接把返回的图片路径放置到 image 标签中即可。

当前可以绘制3种类型的配置: image、text、rect。配置的属性基本上使用的都是 css 的驼峰名称,还是比较好理解的。

image(图片)

属性 含义 默认值 可选值
url 绘制的图片地址,可以是本地图片,如:/images/1.jpeg
top 左上角距离画板顶部的距离
left 左上角距离画板左侧的距离
width 要画多宽 0
height 要画多高 0

text(文本)

属性 含义 默认值 可选值
content 绘制的图片地址 ''(空字符串)
color 颜色 black
fontSize 字体大小 16
textAlign 文字对齐方式 left center、right
lineHeight 行高,只有在多行文本中才有用 20
top 文本左上角距离画板顶部的距离 0
left 文本左上角距离画板左侧的距离 0
breakWord 是否需要换行 false true
MaxLineNumber 最大行数,只有设置 breakWord: true ,当前属性才有效,超出行数内容的显示为... 2
width 和 MaxLineNumber 属性配套使用,width 就是达到换行的宽度
bolder 是否加粗 false true
textDecoration 显示中划线、下划线效果 none underline(下划线)、line-through(中划线)

rect (矩形,线条)

属性 含义 默认值 可选值
background 背景颜色 black
top 左上角距离画板顶部的距离
left 左上角距离画板左侧的距离
width 要画多宽 0
height 要画多高 0

Q&A

最佳实践

绘制操作的时候最好 锁住屏幕 ,例如在点击绘制的时候

wx.showLoading({
 title: '绘制分享图片中',
 mask: true
})

绘制完成之后

wx.hideLoading()

具体可以参考项目下的 /pages/multiple

1、二维码和小程序码如何绘制?

  • 二维码和小程序码可以通过调用微信官方的接口产生,需要后端配合。
  • 然后走 type: image 类型进行绘制即可。

2、绘制流程相关

  • views 数组中的顺序代表绘画的先后顺序,会有覆盖的现象。请各位使用者注意。

3、如何实现圆形头像?

  • canvas 中没有绘制圆形图片的方法,所以使用了 hack 的方式来实现的。使用一张中间镂空的图片盖在头像上就可实现当前效果。

4、canvas drawer 组件为什么不直接显示canvas画板和其内容呢?

  • 考虑到大部分场景,我们都是用来把图片保存到本地,或用以展示。
  • 保存到本地,返回临时文件给调用者一定是最佳的解决方式。
  • 展示,转化成图片之后,就可以使用 image 基础组件的所有显示模式了,还能设置宽高。

TIPS

如果有什么疑问,欢迎 issues。 如果觉得不错,能不能送我小 ✨ ✨ ,然我有更多的动力更新。

github:github.com/kuckboy1994…

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
ExtJS自定义主题(theme)样式详解
Nov 18 Javascript
window.location的重写及判断location是否被重写
Sep 04 Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
利用vue实现模态框组件
Dec 19 Javascript
js定时器实例分享
Dec 20 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
Mar 01 Javascript
JS实现的点击按钮图片上下滚动效果示例
Jan 28 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 #Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
Sep 03 #Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 #Javascript
Layui 动态禁止select下拉的例子
Sep 03 #Javascript
解决Layui中layer报错的问题
Sep 03 #Javascript
Layui Table js 模拟选中checkbox的例子
Sep 03 #Javascript
element ui分页多选,翻页记忆的实例
Sep 03 #Javascript
You might like
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
PHP正则表达式过滤html标签属性(DEMO)
2016/05/04 PHP
解决tp5在nginx下修改配置访问的问题
2019/10/16 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
Javascript学习笔记2 函数
2010/01/11 Javascript
使用js实现雪花飘落效果
2013/08/26 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
JS实现百度搜索接口及链接功能实例代码
2018/02/02 Javascript
JS中this的指向以及call、apply的作用
2018/05/06 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
2020/04/17 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
python提示No module named images的解决方法
2014/09/29 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
用python结合jieba和wordcloud实现词云效果
2017/09/05 Python
Python3 实现随机生成一组不重复数并按行写入文件
2018/04/09 Python
DES加密解密算法之python实现版(图文并茂)
2018/12/06 Python
python mac下安装虚拟环境的图文教程
2019/04/12 Python
python 实现屏幕录制示例
2019/12/23 Python
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
李维斯牛仔裤荷兰官方网站:Levi’s NL
2020/08/23 全球购物
哈弗商学院毕业生求职信
2014/02/26 职场文书
办公室副主任职责范本
2014/03/08 职场文书
法人委托书的范本格式
2014/09/11 职场文书
2014年医务科工作总结
2014/12/18 职场文书
岳庙导游词
2015/02/04 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
Python基础之教你怎么在M1系统上使用pandas
2021/05/08 Python
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js