feat: add blob outputType

lijinke666 · Jul 4, 2019 · 1ab061b · 1ab061b
1 parent 91ca007
commit 1ab061b
Show file tree

Hide file tree

Showing 9 changed files with 16,873 additions and 280 deletions.
diff --git a/.gitignore b/.gitignore
@@ -5,4 +5,4 @@ npm-debug.log
 .DS_Store
 .history
 npm-error.log
-yarn-error.log
+yarn-error.log
diff --git a/.npmignore b/.npmignore
@@ -12,4 +12,5 @@ __tests__
 /.*
 postcss.config.json
 watermark.png
-demo.jpg
+demo.jpg
+yarn.lock
diff --git a/README.md b/README.md
@@ -35,19 +35,19 @@ online example : [https://lijinke666.github.io/react-image-process/](https://lij
 ## Usage
 
 ```jsx
-import React from "react";
-import ReactDOM from "react-dom";
-import ReactImageProcess from "react-image-process";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactImageProcess from 'react-image-process';
 
 const onComplete = data => {
-  console.log("data:", data);
+  console.log('data:', data);
 };
 
 ReactDOM.render(
   <ReactImageProcess mode="base64" onComplete={onComplete}>
     <img src="YOUR_IMG_URL" />
   </ReactImageProcess>,
-  document.getElementById("root")
+  document.getElementById('root')
 );
 ```
 
@@ -60,60 +60,58 @@ Support multiple Images
 </ReactImageProcess>
 ```
 
-
-
 > rotate
 
 ```jsx
- <ReactImageProcess mode="rotate" rotate={30}>
-   <img src="YOUR_IMG_URL" />
- </ReactImageProcess>
+<ReactImageProcess mode="rotate" rotate={30}>
+  <img src="YOUR_IMG_URL" />
+</ReactImageProcess>
 ```
 
 > get primary color
 
 ```jsx
- <ReactImageProcess mode="primaryColor" onComplete={(color)=> console.log(color)}>
-   <img src="YOUR_IMG_URL" />
- </ReactImageProcess>
+<ReactImageProcess mode="primaryColor" onComplete={color => console.log(color)}>
+  <img src="YOUR_IMG_URL" />
+</ReactImageProcess>
 ```
 
 > waterMark
 
 ```jsx
-  <ReactImageProcess
-    mode="waterMark"
-    waterMarkType="image"
-    waterMark={YOUR_WATER_URL}
-    width={60}
-    height={60}
-    opacity={0.7}
-    coordinate={[430, 200]}
-  >
-    <img src="YOUR_IMG_URL" />
- </ReactImageProcess>
+<ReactImageProcess
+  mode="waterMark"
+  waterMarkType="image"
+  waterMark={YOUR_WATER_URL}
+  width={60}
+  height={60}
+  opacity={0.7}
+  coordinate={[430, 200]}
+>
+  <img src="YOUR_IMG_URL" />
+</ReactImageProcess>
 ```
 
 ```jsx
-  <ReactImageProcess
-    mode="waterMark"
-    waterMarkType="text"
-    waterMark={'WATER'}
-    fontBold={false}
-    fontSize={20}
-    fontColor="#396"
-    coordinate={[10, 20]}
-  >
-    <img src="YOUR_IMG_URL" />
- </ReactImageProcess>
+<ReactImageProcess
+  mode="waterMark"
+  waterMarkType="text"
+  waterMark={'WATER'}
+  fontBold={false}
+  fontSize={20}
+  fontColor="#396"
+  coordinate={[10, 20]}
+>
+  <img src="YOUR_IMG_URL" />
+</ReactImageProcess>
 ```
 
 > imageFilter
 
 ```jsx
-  <ReactImageProcess mode="filter" filterType="vintage">
-   <img src="YOUR_IMG_URL" />
- </ReactImageProcess>
+<ReactImageProcess mode="filter" filterType="vintage">
+  <img src="YOUR_IMG_URL" />
+</ReactImageProcess>
 ```
 
 ## API
@@ -122,6 +120,7 @@ Support multiple Images
 | ------------- | -------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ---------------------- |
 | mode          | can be set to `base64` `clip` `compress` `rotate` `waterMark` `filter` `primaryColor`                                            | `string`               | `base64`               |
 | onComplete    | The callback after trans complete conversion                                                                                     | function(base64Data){} | `-`                    |
+| outputType    | image data output type of `blob`                                                                                                 | `dataUrl`              | `string`               | `dataUrl` |
 | scale         | When the mode is equal to 'clip', the zoom scale of the image.                                                                   | `number`               | `1.0`                  |
 | coordinate    | When the mode is equal to 'clip', coordinate of the image. like `[[x1,y1],[x2,y2]]`, if mode equal to `waterMark` like `[x1,y1]` | `number[]`             | `-`                    |
 | quality       | When the mode is equal to 'compress', quality of the image.                                                                      | `number`               | `0.92`                 |
@@ -146,31 +145,41 @@ npm start
 
 ## Properties
 
-```jsx
-  static propTypes = {
-    children: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
-    mode: PropTypes.oneOf(MODE),
-    waterMarkType: PropTypes.oneOf(WATER_MARK_TYPE),
-    filterType: PropTypes.oneOf(FILTER_TYPE),
-    waterMark: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.element,
-      PropTypes.node
-    ]),
-    scale: PropTypes.number,
-    rotate: PropTypes.number,
-    quality: PropTypes.number,
-    width:PropTypes.number,
-    height:PropTypes.number,
-    fontColor:PropTypes.string,
-    fontSize: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number
-    ]),
-    fontBold:PropTypes.bool,
-    coordinate: PropTypes.array,
-    onComplete: PropTypes.func
-  };
+```ts
+export type ReactImageProcessMode =
+  | 'base64'
+  | 'clip'
+  | 'compress'
+  | 'rotate'
+  | 'waterMark'
+  | 'filter'
+  | 'primaryColor';
+
+export type ReactImageProcessWaterMarkType = 'image' | 'text';
+export type ReactImageProcessFilterType =
+  | 'vintage'
+  | 'blackWhite'
+  | 'relief'
+  | 'blur';
+export type ReactImageProcessOutputType = 'blob' | 'dataUrl';
+
+export interface ReactImageProcessProps {
+  mode: ReactImageProcessMode;
+  waterMarkType: ReactImageProcessWaterMarkType;
+  filterType: ReactImageProcessFilterType;
+  outputType: ReactImageProcessOutputType;
+  waterMark: string;
+  rotate: number;
+  quality: number;
+  coordinate: number[];
+  width: number;
+  height: number;
+  opacity: number;
+  fontColor: number;
+  fontSize: number;
+  fontBold: number;
+  onComplete: (data: Blob | string) => void;
+}
 ```
 
 ## License

diff --git a/example/example.js b/example/example.js
@@ -1,35 +1,35 @@
-import React, { Fragment } from "react";
-import ReactDOM from "react-dom";
-import ReactImageProcess from "../src";
-import swal from "sweetalert";
-import { name } from "../package.json";
+import React, { Fragment } from 'react';
+import ReactDOM from 'react-dom';
+import ReactImageProcess from '../src';
+import swal from 'sweetalert';
+import { name } from '../package.json';
 
-import demoImg from "./demo.jpg";
-import waterMark from "./watermark.png";
+import demoImg from './demo.jpg';
+import waterMark from './watermark.png';
 
-import "./example.less";
+import './example.less';
 
 const onComplete = data => {
-  console.log("data:", data);
+  console.log('data:', data);
 };
 
 class Demo extends React.PureComponent {
   constructor(props) {
     super(props);
   }
   state = {
-    primaryColor: "transparent"
+    primaryColor: 'transparent'
   };
   getPrimaryColorComplete = primaryColor => {
-    console.log("primaryColor:", primaryColor);
+    console.log('primaryColor:', primaryColor);
     this.setState({ primaryColor });
   };
   render() {
     const { primaryColor } = this.state;
     return (
       <Fragment>
         <h1>
-          {name}{" "}
+          {name}{' '}
           <a
             href="https://github.com/lijinke666/react-image-process/blob/master/example/example.js"
             target="_blank"
@@ -43,15 +43,19 @@ class Demo extends React.PureComponent {
         <img src={demoImg} alt="clip" className="example-img" />
 
         <h2>base64</h2>
-        <ReactImageProcess mode="base64" onComplete={onComplete}>
+        <ReactImageProcess
+          mode="base64"
+          outputType="blob"
+          onComplete={onComplete}
+        >
           <img
             src={demoImg}
             alt="base64"
             className="example-img"
             onClick={() =>
               swal({
                 text: `
-              { 
+              {
                 mode:'base64'
               }
             `
@@ -179,7 +183,7 @@ class Demo extends React.PureComponent {
             }
           />
         </ReactImageProcess>
-        <div style={{textAlign:"center"}}>{primaryColor}</div>
+        <div style={{ textAlign: 'center' }}>{primaryColor}</div>
 
         <h2>waterMark</h2>
         <ReactImageProcess
@@ -317,4 +321,4 @@ class Demo extends React.PureComponent {
   }
 }
 
-ReactDOM.render(<Demo />, document.getElementById("root"));
+ReactDOM.render(<Demo />, document.getElementById('root'));