- 图文拼接工具 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 是什么东西？
puzzles-3-01.png
Puzzles 是一个用于 动态的 将多个图片、文本或形状，合并成一个新的图片的工具，上图很清晰直观的在阐述 Puzzles 合并的过程。
1.2 应用原理
Puzzles 由一个云端拼图服务器，以及对外提供的 WebAPI 构成。云服务提供拼接过程及计算和优化能力，将 web 接口获取到的指令进行运算，对其响应一个 buffer 或者 base64 格式数据，用于描述一张图片。
buffer：当访问者是服务器端，有文件处理能力。则可以将响应的
buffer作为缓存处理或者写入文件等；
base64：主要面向纯H5前端访问者，通过浏览器自带的<img>标签，将base64格式数据直接赋值于src属性即可被渲染为显示图片。
server.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
比如，我们需要根据用户来生成可以裂变新用户的分享图，其中背景是设计好的模板，而一些其他数据需要实时动态获取，例如用户信息、分享码或者二维码、商品图片等
image
生成的新图，用户可以选择保存，进而进一步分享或裂变。或者将结果作为一种凭证，应用于其他线下营销场景。
可拼接内容
- 将多图片进行拼接;
- 选择不同的字体，生成拼接文字;
- 生成可拼接的形状，包含矩形、圆形、椭圆形、多边形或线条；
拼接步骤
- 1.实例化
Puzz对象; - 2.通过
drawBackground()绘制主背景; - 3.通过其他的
draw...()函数绘制其他图层; - 4.渲染并得到返回结果。
使用限制
- 只能使用图片的 web url 地址，暂不支持本地图片发送；
- 拼接的文字不支持自动换行；
- 拼接的文字字体现只支持13种，包含部分中文和英文字体；
- 访问者必须是可联网的应用；
1.5 为什么使用 Puzzles？
- 减轻应用服务器压力，将部分业务依托于第三方进行计算；
- 支持中文文本拼接
- 无需安装其他软件作为环境支持
- 降低拼图过程中的技术成本
1.6 Puzzles 未来还会提供什么?
未来预计添加的升级内容
- 自定义字体上传及应用
- 文本自动换行
- 更多的形状支持
- 本地图片拼接
网友评论