图文拼接工具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前端访问者，通过浏览器自带的 <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 未来还会提供什么?

未来预计添加的升级内容

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