图文拼接工具Puzzles (支持纯前端、nodejs、webAPI)

图文拼接工具 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前端访问者，通过浏览器自带的标签，将 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

下载地址：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 未来还会提供什么?

未来预计添加的升级内容

自定义字体上传及应用
文本自动换行
更多的形状支持
本地图片拼接