JS相关

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

2020-01-19  本文已影响0人  阿拉拉布
  1. 图文拼接工具 Puzzles

1.1 Puzzles 是什么东西?
1.2 应用原理
1.3 配置及获取方式
1.4 Puzzles 的使用场景
1.5 为什么使用 Puzzles?
1.6 Puzzles 未来还会提供什么?

  1. Puzzles APIs
  2. Puzzles 中的文本和字体
  3. 随机验证码生成

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之类的做图软件;

Example

比如,我们需要根据用户来生成可以裂变新用户的分享图,其中背景是设计好的模板,而一些其他数据需要实时动态获取,例如用户信息、分享码或者二维码、商品图片等


image

生成的新图,用户可以选择保存,进而进一步分享或裂变。或者将结果作为一种凭证,应用于其他线下营销场景。

可拼接内容

拼接步骤

使用限制

1.5 为什么使用 Puzzles?

1.6 Puzzles 未来还会提供什么?

未来预计添加的升级内容

上一篇 下一篇

猜你喜欢

热点阅读