图文拼接工具Puzzles (支持纯前端、nodejs、webA
- 图文拼接工具 Puzzles
1.1 Puzzles 是什么东西?
1.2 应用原理
1.3 配置及获取方式
1.4 Puzzles 的使用场景
1.5 为什么使用 Puzzles?
1.6 Puzzles 未来还会提供什么?
- Puzzles APIs
- Puzzles 中的文本和字体
- 随机验证码生成
Github地址: https://github.com/Alalabu/puzzles
1.1 Puzzles 是什么东西?
![](https://img.haomeiwen.com/i10417994/90aab84661440a83.png)
Puzzles 是一个用于 动态的 将多个图片、文本或形状,合并成一个新的图片的工具,上图很清晰直观的在阐述 Puzzles 合并的过程。
1.2 应用原理
Puzzles 由一个云端拼图服务器,以及对外提供的 WebAPI 构成。云服务提供拼接过程及计算和优化能力,将 web 接口获取到的指令进行运算,对其响应一个 buffer
或者 base64
格式数据,用于描述一张图片。
buffer:当访问者是服务器端,有文件处理能力。则可以将响应的
buffer
作为缓存处理或者写入文件等;
base64:主要面向纯H5前端访问者,通过浏览器自带的<img>
标签,将base64
格式数据直接赋值于src
属性即可被渲染为显示图片。
![](https://img.haomeiwen.com/i10417994/d1103f7040d9f60f.png)
1.3 配置及获取方式
a. WebAPI
对于 Puzzles 的访问是通过
http
协议,发送POST
数据来进行拼图业务描述的。
// Puzzles API 拼接
const puzzData = {
dataType: 'base64',
puzz: {
root: { type: 'img', imgurl: 'https://xxx/bg.jpg' },
nodes: [{
type: 'img', imgurl: 'https://xxx/goods.jpg',
top: 45.6, left: 45.3, width: 412, height: 219.4,
}, {
type: 'text', text: `木瓜牛奶`,
fontsize: 20, color: '#613E94', top: 0, left: 0,
}, {
type: 'shape', shape: 'rectangle', width: 90, height:45, x: 10, y: 18, fillColor: '#D46C75',
}]
},
};
// 模拟 jQuery Ajax 的调用方式
$.ajax({
type: "POST",
url: "http://puzzles.net.cn/xxx",
data: puzzData,
success: function(res){
// do something...
}
});
此种方式的 优势 ,便是调用灵活。支持 http
访问协议的应用都可以发起调用。但其 劣势 ,是繁琐,特别是在拼接每个图层的过程中,查询所需参数会比较麻烦。
b. 前端外部 js 封装对象
Puzzles 封装了一个外部 js 文件,用于更方便的访问 WebAPI
<img id='example' />
<script src="./puzzles.min.js" />
<script>
var puzz = new Puzz();
// 为拼图添加一个纯色或图片背景(此处为纯色背景)
puzz.drawBackground({width: 200, height: 300, bgcolor: '#DD5145'});
// 添加绘制一个图片
puzz.drawImage({
width: 100, height: 100, left: 50, top: 50,
imgurl: 'https://sheu-huabei2.oss-cn-beijing.aliyuncs.com/puzzles_demo/js-logo.jpg',
});
// 添加绘制一段文字
puzz.drawText({top: 170, left: 30, text: 'I love code!', color: '#FFF', fontsize: 25, family: 'msyh'});
// 获取渲染结果
puzz.render((err, res) => {
const imgData = res.data;
// 页面调用过程中返回数据为base64数据格式,可直接赋值于 img 标签的 src 属性
document.getElementById('example').src = imgData;
});
</script>
下载地址:puzzles.min.js
c. npm 安装
Puzzles 提供 node.js 环境下的依赖注入,安装命令是:
npm install puzzles --save
"use strict";
const Puzz = require('puzzles');
// 某一个用于生成图片的函数
const someFunc = async function(){
const puzz = new Puzz({dataType: 'buffer'});
// 为拼图添加一个纯色或图片背景(此处为纯色背景)
puzz.drawBackground({width: 200, height: 300, bgcolor: '#DD5145'});
// 添加绘制一个图片
puzz.drawImage({
width: 100, height: 100, left: 50, top: 50,
imgurl: 'https://sheu-huabei2.oss-cn-beijing.aliyuncs.com/puzzles_demo/js-logo.jpg',
});
// 添加绘制一段文字
puzz.drawText({top: 170, left: 30, text: 'I love code!', color: '#FFF', fontsize: 25, family: 'msyh'});
// 获取渲染结果
const res = await puzz.render();
if(!res.err){
const fs = require('fs');
const wres = await fs.writeFileSync('./demo01-first.png', new Buffer(res.data.data));
console.log('写入文件结果:', wres);
}
};
1.4 Puzzles 的使用场景
如果你只需要生成一张图片(不需要自动填充变量),建议使用美图秀秀、PS、AI之类的做图软件;
- 批量自动化的名片、海报生成;
- 背景相似,局部不同的图片生成,如:每个用户的标签拥有不同的二维码;
- 无需服务器端支持的纯前端图文生成;
- node.js服务器端自动化图文拼接;
- ...
Example
比如,我们需要根据用户来生成可以裂变新用户的分享图,其中背景是设计好的模板,而一些其他数据需要实时动态获取,例如用户信息、分享码或者二维码、商品图片等
![](https://img.haomeiwen.com/i10417994/ce2c17b93391a7be.jpg)
生成的新图,用户可以选择保存,进而进一步分享或裂变。或者将结果作为一种凭证,应用于其他线下营销场景。
可拼接内容
- 将多图片进行拼接;
- 选择不同的字体,生成拼接文字;
- 生成可拼接的形状,包含矩形、圆形、椭圆形、多边形或线条;
拼接步骤
- 1.实例化
Puzz
对象; - 2.通过
drawBackground()
绘制主背景; - 3.通过其他的
draw...()
函数绘制其他图层; - 4.渲染并得到返回结果。
使用限制
- 只能使用图片的 web url 地址,暂不支持本地图片发送;
- 拼接的文字不支持自动换行;
- 拼接的文字字体现只支持13种,包含部分中文和英文字体;
- 访问者必须是可联网的应用;
1.5 为什么使用 Puzzles?
- 减轻应用服务器压力,将部分业务依托于第三方进行计算;
- 支持中文文本拼接
- 无需安装其他软件作为环境支持
- 降低拼图过程中的技术成本
1.6 Puzzles 未来还会提供什么?
未来预计添加的升级内容
- 自定义字体上传及应用
- 文本自动换行
- 更多的形状支持
- 本地图片拼接