image-template-generator - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

index.js

@@ -0,1 +1,5 @@
+/**
+ * @author xiongwilee
+ */
+
 const gm = require('gm');
@@ -10,5 +14,6 @@ const Template = require('./src/template');
  * @param  {Object} itemsConf 				模板元素配置
+ * @param  {Object} options 				输出配置
  * @return {Promise}
  */
-module.exports = function imageTemplateGenerator(bg, tempConf, itemsConf) {
+module.exports = function imageTemplateGenerator(bg, tempConf, itemsConf, options) {
   if (!bg || !tempConf) return Promise.reject('Illegal Arguments!');
@@ -21,4 +26,4 @@
   return Temp.then((err, temp) => {
-    return temp.gen(itemsConf);
+    return temp.gen(itemsConf, options);
   });
 }

package.json

 {
   "name": "image-template-generator",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # imageTemplateGenerator
 
+[![NPM version](https://img.shields.io/npm/v/image-template-generator.svg)](https://www.npmjs.com/package/image-template-generator)
+
 > 通过创建的模板，快速生成对应的图片，用以：自动生成营销分享图片、批量生成不同二维码的图片等等
@@ -7,5 +9,5 @@
 
-## 入门
+## 一、入门
 
-### 一、环境依赖
+### 1、环境依赖
 
@@ -16,3 +18,3 @@ imageTemplateGenerator 基于 [gm](https://github.com/aheckmann/gm) ，所以同gm的依赖，需要安装对应的工具。
 
-```
+```shell
 $ brew install imagemagick
@@ -23,6 +25,7 @@ $ brew install graphicsmagick
 
-### 二、试用
+### 2、试用
 
 下载文件到任意目录，并安装依赖：
-```
+```shell
+# 仓储有一套中文字体，clone会比较慢，请耐心等候
 $ git clone git://github.com/xiongwilee/imageTemplateGenerator.git
@@ -34,3 +37,3 @@ $ cd imageTemplateGenerator
 执行示例文件：
-```
+```shell
 $ cd example
@@ -40,18 +43,167 @@ $ node index.js
 
-提示：
+提示：`生成图片成功: ./merged.png !`，则说明操作成功，可以查看生成的`example/merged.png`文件。
+
+## 二、详细说明
+
+### 1、使用方法
+
+**1）安装依赖**
+
+说明： `imagemagick`, `graphicsmagick`, `ghostscript` 也是必须的，见上文。
+
+```shell
+$ npm install image-template-generator
 ```
-生成图片成功: ./merged.png !
+
+**2）使用**
+
+用法一：
+```javascript
+const Itg = require('image-template-generator');
+Itg(bgImg, { /* template config*/})
+  .then((temp)=>{
+    return temp.gen({/* item config */}, { /* options */ })
+  })
+  .then((result)=>{
+    // result
+  })
 ```
-则操作成功。
 
-## 详细说明
+用法二：
+```javascript
+const Itg = require('image-template-generator');
+Itg(bgImg, { /* template config*/}, {/* item config */}, { /* options */ })
+  .then((result)=>{
+    // result
+  })
+```
 
-### 一、使用方法
+可参考： `example/index.js`，此外，`bgImg`, `template config`, `item config`，`options` 详细配置说明见下文。
 
-#### 
+### 2、详细配置
 
-### 二、详细配置
+### 1）生成模板
 
-### 三、TODO
+```javascript
+/**
+ * imageTemplateGenerator： 通过创建的模板，拼接合并成一张图片
+ * 
+ * @param  {<Buffer|Stream|Url<String>|Path<String>|Request Config<Object>} bg        背景图片
+ * @param  {Object} tempConf                模板配置
+ * @return {Promise}
+ */
+Itg(bgImg[, Template config])
+```
 
+例如：
+```javascript
+const Itg = require('image-template-generator');
+const bgImg = '<Buffer|Stream|Url<String>|Path<String>|Request Config<Object>'
+Itg(bgImg, { /* template config*/})
+  .then((temp)=>{
+    // temp 是实例化之后的模板对象
+    // 后续可以通过 temp.gen 方法根据创建的模板生成图片
+  })
+```
+
+**bgImg**
+
+整体的背景图片，可以是：
+
+- `Buffer`: 文件Buffer
+- `Stream`: 文件流，例如：请求图片的http response
+- `Url<String>`: 图片的链接
+- `Path<String>`: 图片的文件系统路径
+- `Request Config<Object>`: [requestjs](https://github.com/request/request) 的请求配置，参考[requestjs的配置文档](https://github.com/request/request#requestoptions-callback)
+
+**template config**
+
+模板的配置，用以说明每个元素的大小、位置、默认图片等属性。
+
+```JavaScript
+{
+  logo: {
+    size: '144,74', // 图片的大小，用“,”分割，第一个值为宽，第二个值为高
+    position: '+118+20', // 图片的位置，用“+”或“-”分割，第一个值为相对于bgImg的x轴偏移，第二个值为相对y轴，参考：https://github.com/aheckmann/gm
+    default: 'http://img002.qufenqi.com/products/ac/04/ac04decbbd372b5289e1bf1be30fad99.png' // 默认图片，和bgImg一样，可以是：<Buffer|Stream|Url<String>|Path<String>|Request Config<Object>
+  },
+  title: {
+    size: '320,60',
+    position: '+28+380',
+    style: { // 文字样式
+      fontSize: '14',
+      color: '#333333'
+    },
+    default: '更多商品，敬请期待' // 嵌入的文字，需要手动用'\n'分割
+  },
+  slogan: {
+    size: '343,56',
+    position: '+14+430',
+    default: path.resolve('../images/slogan.png')
+  },
+  qrcode: {
+    size: '91,91',
+    position: '+93+528',
+    default: 'http://img003.qufenqi.com/products/cb/9f/cb9fbcf2eddb111b08ec6c0795900060.png'
+  },
+  {
+    // ... 
+    // 该配置可以无限添加。
+  }
+}
+```
+
+### 2）通过模板生成图片
+
+```javascript
+/**
+   * 通过模板生成对应的图片
+   * 
+   * @param  {Object} itemsConf   图片的元素配置
+   * @param  {Object} options      产出配置
+   *                  options.type 'Buffer'/'Stream'/'Path'
+   * @return {Promise(<Buffer|Stream>)}    返回Promise
+   */
+temp.gen(itemsConf[, options])
+```
+
+例如：
+```javascript
+temp.gen({/* item config */}, { /* options */ })
+ .then((data)=>{
+    // data 根据options返回，默认产出Buffer
+  })
+```
+
+**itemsConf**
+
+生成图片的元素配置，key和`template config`的key一致（如果使用默认，不用配置即可），例如：
+```javascript
+{
+    banner: 'https://img002.qufenqi.com/products/e0/af/e0afcc5a1350f4966f963bc0bff6aafa.jpg',
+    title: 'Apple iPhone X (A1865) 64GB 深空灰色 移动联通\n电信4G手机 ',
+    logo: {
+      method: 'GET',
+      url: 'https://www.baidu.com/img/bd_logo1.png',
+      // body: JSON.stringify(postData),
+      // encoding - encoding to be used on setEncoding of response data. If null, the body is returned as a Buffer.
+      // 参考：https://github.com/request/request#requestoptions-callback encoding配置
+      encoding: null
+    },
+    qrcode: path.resolve('../images/qrcode.png')
+}
+```
+
+key对应的值，和bgImg一致，包括：`<Buffer|Stream|Url<String>|Path<String>|Request Config<Object>`。
+
+**options**
+
+- `type`: String， 可以配置为'Buffer'/'Stream'/'Path'
+- `path`: Sting，如果options配置为"Path"，则需要配置写入文件系统的路径
+
+
+以上为详细配置，综合示例可参考：`example/index.js`。
+
+### 3、TODO
+
 - [ ] 添加测试用例 
@@ -61,4 +213,4 @@ - [ ] 文字行高，及自动换行功能
 
-## 贡献
+## 三、贡献
 
 欢迎提issue、fork；有任何疑问也可以邮件联系：xiongwilee[at]foxmail.com。

src/template.js

@@ -0,1 +1,5 @@
+/**
+ * @author xiongwilee
+ */
+
 const Stream = require('stream');
@@ -19,8 +23,10 @@ const fs = require('fs');
    * @param  {Object} itemsConf   图片的元素配置
-   * @return {Promise(<Stream>)}    返回Promise, 返回为图片处理流     
+   * @param  {Object} options      产出配置
+   *                  options.type 'Buffer'/'Stream'/'Path'
+   * @return {Promise(<Buffer|Stream>)}    返回Promise
    */
-  gen(itemsConf, config) {
+  gen(itemsConf, options) {
     const conf = Object.assign({
       type: 'Buffer'
-    }, config);
+    }, options);
 
@@ -27,0 +33,0 @@ return this.temps.reduce((accu, curr, index) => {

src/util.js

@@ -0,1 +1,5 @@
+/**
+ * @author xiongwilee
+ */
+
 const Stream = require('stream');
@@ -12,5 +16,5 @@ const path = require('path');
  * @param  {Buffer|Stream|String|Object} 	img 	图片的 Buffer / Stram / 链接 / request请求配置对象
- * @param  {Object} 						config	配置
- *                               			config.type Buffer | Stream | Path
- *                               			config.path 如果config.type为Path,则配置path路径
+ * @param  {Object} 						config	   配置
+ *                              config.type Buffer | Stream | Path
+ *                              config.path 如果config.type为Path,则配置path路径
  * @return {Promise} 
@@ -17,0 +21,0 @@ */

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8242692

increased by0.06%

Lines of code

385

increased by3.22%

Number of lines in readme file

210

increased by262.07%

No dependency changes