# square-9-image

**Repository Path**: chzh314/square-9-image

## Basic Information

- **Project Name**: square-9-image
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-07-11
- **Last Updated**: 2021-11-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# square-9-png

react.js 使用的九宫格图编辑器，可以快速定义九宫格模板，并将模板信息写入图片中，无需单独存储数据

作者: chzh314@hotmail.com

---

## 一、编辑器

### 1. 使用方法

- 安装依赖  
   `npm install --save square-9-png`

- 安装完毕后， 在 react 组件中使用

```tsx
import React, { useState } from 'react';
import Square from 'square-9-png';
...
function App() {
  const [visible, setVisible] = useState<Boolean>(false);
  return (
    <Square
      visible={visible}
      onClose={() => {
        setVisible(false);
      }}
      onExport={(file: Blob) => {
        //TODO: 处理导出文件
      }}
      testWord="测试\n文本"
    />
  );
}

```

---

### 2. 参数

| 参数名   | 类型                  | 必填 | 默认值             | 描述                           |
| -------- | --------------------- | ---- | ------------------ | ------------------------------ |
| visible  | `boolean`             | -    | true               | 编辑器是否可见                 |
| source   | `string`              | -    | `undefined`        | 默认使用九宫格底图             |
| testWord | `string`              | -    | `这是一条测试文本` | 测试九宫格时显示的内容(可换行) |
| onExport | `(target:Blob)=>void` | -    | `undefined`        | 用户点击导出时的处理方法       |
| onClose  | `()=>void`            | -    | `undefined`        |  用户点击关闭时的处理方法      |

---

### 项目依赖

```
1. antd v4 - UI组件
2. brower-image-combiner 用于导出PNG写入头信息的图形库
```

## 二、单独使用预览器

```tsx
  import React, { useState, use } from 'react';
  import Previewer, { SquareInfoAdapter, SquareInfoExtractor, SquareInfo } from 'square-9-png/lib/previewer'
  ...


  const url="***.png" //经过编辑器编辑过的九宫格图
  const WIDTH = 400;
  function App() {
    const [previewInfo, setPreviewInfo] = useState<SquareInfo | null>(false);
    useEffect(() => {
      SquareInfoAdapter(SquareInfoExtractor(url))
        .then((data) => {
          setPreviewInfo(data);
        })
        .catch(console.error);
    }, []);
    return (
      <div>
        {previewInfo && <Previewer {...previewInfo} src={url} />}
      </div>
    );
  }
```