/json2image

js海报生成,通过json配置生成图片,专为海报生成设计,支持多种生成海报场景

Primary LanguageTypeScript

json2image

原理

通过配置json使用原生canvas将图片和文字组合生成一张base64图片

演示

demo

使用场景

1、生成分享海报,可以100%还原设计稿
2、复杂文字、图片组合样式,方便适配多屏幕
3、图片压缩
4、添加水印
5、支持部署到node后端,可以无视跨域问题、兼容问题等 云函数示例

功能

  • 多行文本自动换行,支持左中右对齐
  • 文本多种颜色
  • 竖排文字
  • 旋转文字
  • 图片自动高度
  • 图片左中右对齐
  • 图片圆角
  • 导出动态高度
  • 可以缩放调整清晰度,设置ratio即可
  • 设置quality可以实现图片文件大小压缩

计划

  • 小程序版本
  • 文本渐变颜色
  • 圆形、矩形、圆角矩形、各种边框
  • 渐变边框、渐变背景
  • 旋转文字优化
  • 导出动态高度优化
  • cover方式绘制图片
  • 分组

与 json2canvas 对比

1、体积小,json2canvas使用了cax,压缩之后也有100+kb,json2image压缩之后仅有4kb
2、一步到位,json2image直接生成图片,省去json2canvas再做一步转换
3、json2image专为生成海报设计,支持更多海报场景

与 html2canvas 对比

1、设计还原,html2canvas是截取当前设备下的dom结构,可能会由于设备的不同而导致得到的图片表现不统一,使用json2image可以在任何设备之间保持100%与设计稿统一
2、需保存图片和显示样式不同,如需保存图片要添加二维码、增加内容等

快速开始

安装

npm i -S json2image
or
yarn add -S json2image
or
直接在script标签中使用
<script src="https://unpkg.com/browse/json2image@0.1.3/dist/index.js"></script>

使用

注意:前端生成时,跨域图片需要后端设置cors

import json2image from 'json2image';

// 1、生成海报
const data = {
  width: 750, // 设计稿图片宽度
  height: 600, // 设计稿图片高度
  output: 'jpeg', // 支持png、jpeg
  quality: 0.6, // 图片质量,0-1,小于1则实现压缩
  lineHeight: 1.5,
  color: '#263238',
  textAlign: 'left',
  fontSize: 14,
  fontFamily: '"PingFang SC","sans-serif"',
  autoHeight: false, // 是否动态高度
  ratio: 2, // 缩放,可调整清晰度
  bgColor: 'rgba(255, 255, 255, 0)',
  elements: [
    {
      type: 'img', // 图片节点
      x: 0,
      y: 0,
      width: 750,
      height: 600,
      radius: 0, // 圆角
      autoHeight: false, // 是否自动计算高度
      textAlign: 'left', // 图片对齐方式
      content: './images/bg.png', // 图片url
    },
    {
      type: 'text', // 单色文本节点
      width: 558,
      height: 56,
      maxWidth: 558, // 最大宽度,单行超出省略
      x: 104,
      y: 500,
      fontSize: 28,
      color: '#3C5A6E',
      autoHeight: false, // 是否自动换行
      lineHeight: 1.5,
      textAlign: 'left', // 文字对齐方式
      rotate: 45, // 文本旋转角度
      content: '文本文本',
    },
    {
      type: 'text', // 多色文本节点
      width: 558,
      height: 56,
      maxWidth: 558,
      x: 104,
      y: 500,
      fontSize: 28,
      color: '#3C5A6E',
      autoHeight: false,
      lineHeight: 1.5,
      textAlign: 'left',
      content: [
        {
          content: '默认文本 ',
        },
        {
          fontSize: 36,
          color: 'red',
          content: '红色文本',
        },
        {
          content: ' 默认文本 ',
        },
        {
          color: 'green',
          content: '绿色文本',
        },
        {
          content: ' 默认文本',
        },
      ],
    },
  ],
};

json2image(data, (url) => {
  // 返回base64格式图片
  console.log(url);
}, err => console.log(err));




// 2、压缩图片
const data2 = {
  width: 750,
  height: 600,
  output: 'jpeg',
  quality: 0.5, // 压缩文件大小,目前只支持输出jpeg格式有效
  ratio: 0.5, // 压缩分辨率
  elements: [
    {
      type: 'img',
      width: 750,
      height: 600,
      content: './images/big.png',
    },
  ],
};

json2image(data2, (url) => {
  // 返回base64格式图片
  console.log(url);
}, err => console.log(err));