小程序生成海报:通过 json 配置方式轻松制作一张海报图指南攻略_海报指南攻略

背景由于我们无法将小程序直接分享到朋友圈,但分享到朋友圈的需求又很多,业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片,然后引导用户下载图片到本地后再分享到朋友圈。而小程序 Canvas 功能是很难用的,往往为了绘制一张简单图片,就得写上一堆 boilerplate code ,而且一不小心还会踩到 Canvas 的各种彩蛋(坑)。我

小程序生成海报:通过 json 配置方式轻松制作一张海报图指南攻略

背景

由于我们无法将小程序直接分享到朋友圈,但分享到朋友圈的需求又很多,业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片,然后引导用户下载图片到本地后再分享到朋友圈。而小程序 Canvas 功能是很难用的,往往为了绘制一张简单图片,就得写上一堆 boilerplate code ,而且一不小心还会踩到 Canvas 的各种彩蛋(坑)。我想此时你的心情肯定是这样的。

小程序生成海报:通过 json 配置方式轻松制作一张海报图指南攻略_海报指南攻略

分析

想到小程序中有如此大量的生成图片需求,而 Canvas 生成方法又是如此难用和坑爹。那我们就想到可不可以做一款可以很方便生成图片,并且还能屏蔽掉直接使用 Canvas 的一些坑的库呢?所以我们发起了 “画家计划— 通过 json 数据形式,来进行动态渲染并绘制出图片”。 Painter 库的整体架构如下:

首先,我们定义了一套绘图 JSON 规范,开发者可以根据需求构建生成图片的 Palette(调色板),然后在程序运行过程中把调色板传入给 Painter(画家)。Painter 会调用 Pen(画笔),根据 Palette 内容绘制出对应的图片后返回。

解决问题

那可不可以开发一款生成海报的插件库呢?

  • 首先,只需要提供一份简单的参数配置文件即可
  • 解决掉小程序Canvas遇到的一些大大小小的坑
  • 有严苛的测试环节,解决各种环境和各种机型遇到的问题,并提供稳定的线上版本
  • 长期维护,并有专人更新迭代更新颖的功能

隆重介绍

Painter 的优势

  • 功能全,支持文本、图片、矩形、qrcode 类型的 view 绘制
  • 布局全,支持多种布局方式,如 align(对齐方式)、rotate(旋转)
  • 支持渐变色,阴影,配置简单,容易上手,兼容性好
  • 支持圆角,其中图片,矩形,和整个画布支持 borderRadius 来设置圆角
  • 杠杠的性能优化,我们对网络素材图片加载实现了一套 LRU 存储机制,不用重复下载素材图片。
  • 杠杠的容错,因为某些特殊情况会导致 Canvas 绘图不完整。我们对此加入了对结果图片进行检测机制,如果绘图出错会进行重绘。

How To Use

运行例子

git clone https://github.com/Kujiale-Mobile/Painter.git

代码下载后,用小程序 IDE 打开后即可使用。

注:请选择小程序项目,非小游戏,例子中无 appid,所以无法在手机上运行,如果需要真机调试,请在打开例子时,填上自己的小程序 id

具体详细使用教程 GitHub 地址https://github.com/Kujiale-Mobile/Painter

扩展工具

由于编写配置再加上调试还是有些麻烦,故制作一款可视化编辑工具,直接拖动编辑元素即可生成海报
可视化编辑拖拽直接生成painter代码

  • 工具体验地址https://lingxiaoyi.github.io/painter-custom-poster/
  • 工具使用文档https://juejin.im/post/5d8b20ba51882509615bca09
海计划公众号
(0)
上一篇 2020/03/23 18:37
下一篇 2020/03/23 18:37

您可能感兴趣的内容

  • 一篇文章教会你面试中的小套路基础教程_面试小白教程

    面试,一个短时间内对某个人做出判断的测试。很多时候,工程师们只准备了相关的技术点,却没有对非技术的软实力部分做准备。而软实力的考察,不仅贯穿整个面试流程中,更在BOSS面和HR面中尤为关键。鉴于当前业界也没有特别契合的攻略文档,仅有有几篇文章还是HR写的,特有此文。在本文中,我们将从环境与心态,相关问题和表达技巧三个方面阐述如何准备面试,以确保在硬实力的OK

    2020/04/03
  • 前端模块化规范入门基础知识_规范基础知识教程

    为什么需要模块化?JavaScript 发展初期,代码简单地堆积在一起,只要能顺利地从上往下一次执行即可。但随着网站越来越复杂,实现网站功能的 JavaScript 代码也越来越庞大,网页越来越像桌面程序,很多问题开始暴露出来,比如全局变量冲突、函数命名冲突、依赖关系处理等。1.原始的模块化写法既然模块是要实现某个功能,那么可以把实现功能的一组函数放在同一文

    2020/03/29
  • CSS的文本格式化样式总汇小白攻略_样式基础知识

    长度单位像素 px百分比 %em- 像素是我们在网页中使用的最多的一个单位,* 一个像素就相当于我们屏幕中的一个小点,* 我们的屏幕实际上就是由这些像素点构成的* 但是这些像素点,是不能直接看见。* – 不同显示器一个像素的大小也不相同,* 显示效果越好越清晰,像素就越小,反之像素越大。- 也可以将单位设置为一个百分比的形式,* 这样浏览器将会根据其父元素的

    2020/03/26
  • probot教程视频_一个可训练的能自动回应 Github 活动的机器人

    probot教程视频 官方网址:https://probot.github.io GitHub:https://github.com/probot/probot 简介描述:一个可训…

    2020/03/07
  • node.js识别图片类型基础指南_图片零基础入门

    通过切文件名称后缀来获得图片格式的方式是不准确的,因为文件后缀是可以被强行更改的,这样一个.gif 图片也可以被保存成.jpg,那么在 Node 上我们如何做文件类型的校验呢?通过文件头标识判断图片格式其实很简单,每个图片文件都有文件头标识,各种格式的图片的文件头标识都是不一样,所以可以通过判断文件头的标识来识别图片格式。通过在网上找资料,汇总了如下的 图片

    2020/03/29
  • Web前端必备-Nginx知识汇总菜鸟教程_nginx基础教程

    一、Nginx简介Nginx是一个高性能、轻量级的Web和反向代理服务器, 其特点是占有内存及资源少、抗并发能力强。Nginx安装简单、配置简洁、启动快速便捷、支持热部署、支持 SSL、拥有高度模块化的设计。Nginx的主要功能有:Web服务器反向代理负载均衡二、运行和控制Nginx备注: 以下命令中的 /usr/local/nginx 是nginx二进制文

    2020/03/30
  • Unsplash入门攻略_免费高清图库、素材库

    Unsplash教程视频 官方网址:https://unsplash.com/ 简介描述:免费高清图库、素材库 免费图库素材,适用于个人或商业专案

    2020/03/06
  • instantclick小白指南_实现预加载,无刷新加载页面

    instantclick小白指南 官方网址:http://instantclick.io GitHub:https://github.com/dieulot/instantclic…

    2020/03/06
  • 解决autocomplete=off在Chrome中不起作用的方法基础指南_Chrome菜鸟知识

    大家都知道autocomplete属性是表单字段中的HTML5新属性,该属性有两种状态值,分别为”on” 和 “off”,该属性可省略:省略属性值后默认值为”on”,也可以省略属性名,直接写入关键字on或off。网站项目中,有登录和注册的弹框,在除chrome的浏览器中一切都ok,一旦在谷歌浏览器中,问题来了:首先从登录弹框中登陆成功,chrome会弹出是否

    2020/04/05
  • 前端工程师如何才能不焦虑?新手入门_焦虑基础知识教程

    引言进入2019年,中国互联网充满了焦虑的气息,不断有各种负面的消息,年初的互联网行业的集体大裁员,让大家真实感受了一下互联网下半场的变化。外企最近几年持续的退出中国,裁撤国内研发中心,曾经高大上的代表也逐步褪去了光鲜的外表,不过好在补偿并不亏待,加上外企培养的良好个人素质,再出发也许并不困难。但是,国内的996是否还能适应呢?中兴41岁员工在被裁后跳楼自杀

    2020/03/24
  • linaria使用帮助_一个零运行时 CSS-in-JS 库

    linaria使用帮助 官方网址:https://linaria.now.sh GitHub:https://github.com/callstack/linaria 简介描述:一…

    2020/03/11
  • Js输出方式有哪些?小白知识_js知识小白指南

    1.通过弹窗的形式来输出alert(需要输出的内容);alert(“hello world”);confirm(需要输出的内容);confirm(“你好吗?”);prompt(需要输出的内容);prompt(“请输入内容:”);注意点:如果需要输出的内容不是数字, 那么就必须通过单引号或者双引号括起来在JavaScript中是严格区分大小写的, alert(

    2020/03/22
  • 如何利用HTML5打造桌面应用,介绍基于Nodejs实现搭建跨平台桌面应用的框架入门基础_桌面基础指南

    通常我们会感觉网上有很多有趣的HTML应用,但这些应用非要你打开浏览器,输入网址。其实我们更喜欢直接点击桌面的一个图标就启动一个程序的这种体验。用html5+javascirpt+Css开发的本地桌面应用就是要提高给用户这种体验,这篇文章将介绍开发HTML5本地桌面应用的框架:ElectronElectron是这样一个框架,它可以帮助您使用JavaScrip

    2020/04/06
  • 纯CSS实现Tab切换小白攻略_div小白知识

    说到Tab切换,你可能首先想到的就是使用jQuery,短短几行代码就可以轻松搞定一个Tab切换。而今天所要分享的,是使用 0 行JS代码来实现Tab切换!方法一:模拟单选框原理该方法大致原理如下:当用户点击label元素时,该label所绑定的input单选框就会被选中,同时通过使用CSS选择器让被选中的input元素之后的label和.content元素都

    2020/04/05
  • 手写实现Promise的相关方法基础入门_Promise小白教程

    摘要Promise 作为 JS 社区的异步解决方案,为开发者提供了.then()、Promise.resolve()、Promise.reject()等基本方法。除此之外,为了更方便地组合和控制多个的 Promise 实例,也提供了.all()、.race()等方法。本文会在 Promise 的基本方法上,手动实现更高级的方法,来加深对 Promise 的理

    2020/03/20
  • 谷歌插件在测试的应用菜鸟教程下载_插件使用攻略

    谷歌小插件因其具有窗口控制、网络请求控制、各类事件监听等功能而被广泛应用在浏览器中。鉴于其强大的功能,团队考虑是否可以将其与测试过程相结合,从而提升测试效率。 一、应用背景介绍1.1 分布式全链路跟踪系统-Hunter随着SOA的普及,各大互联网公司都拥有自己较为成熟的分布式跟踪系统,比如Google的Dapper,Twitter的Zipkin,淘宝的鹰眼

    2020/03/23