code arrangement

src/components/app/PartStyles.js

@@ -3,13 +3,6 @@ import './App.css';
 import StyleListViewer from "../../containers/style/StyleListViewer";
 import {isPC} from "../../utils/util";
 
-const PCMessage = () => {
-    if (isPC()) {
-        return <div className="Qr-style-hint">按住 shift 滚动</div>
-    }
-    return null
-}
-
 const PartStyles = ({ setParamInfo }) => {
     const [loaded, setLoaded] = useState(false);
     useEffect(() => {
@@ -21,7 +14,10 @@ const PartStyles = ({ setParamInfo }) => {
     return (<div className="Qr-titled" id="Qr-style">
         <div className="Qr-Centered title-margin">
             <div className="Qr-s-title">Styles</div>
-            <p className="Qr-s-subtitle Qr-rel">点击选择样式<PCMessage/></p>
+            <div className="Qr-s-subtitle Qr-rel">
+                点击选择样式
+                {isPC() ? <div className="Qr-style-hint">按住 shift 滚动</div> : null}
+            </div>
         </div>
         <div className="Qr-s" style={{visibility: loaded ? "visible" :"hidden"}}>
             {styleList}

src/components/renderer/Renderer25D.js

@@ -1,7 +1,7 @@
-import React, { useEffect } from "react";
+import React from "react";
-import {defaultViewBox} from "../../utils/util";
 import {ParamTypes} from "../../constant/ParamTypes";
 import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
+import {createRenderer} from "../style/Renderer";
 
 function listPoints(qrcode, params) {
     if (!qrcode) return []
@@ -84,17 +84,10 @@ function viewBox(qrcode) {
     return String(-nCount) + ' ' + String(-nCount / 2) + ' ' + String(nCount * 2) + ' ' + String(nCount * 2);
 }
 
-const Renderer25D = ({ qrcode, params, setParamInfo}) => {
+const Renderer25D = createRenderer({
-    useEffect(() => {
+    listPoints: listPoints,
-        setParamInfo(getParamInfo());
+    getParamInfo: getParamInfo,
-    }, [setParamInfo]);
+    getViewBox: viewBox
-
+})
-    return (
-        <svg className="Qr-item-svg" width="100%" height="100%" viewBox={viewBox(qrcode)} fill="white"
-             xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
-            {listPoints(qrcode, params)}
-        </svg>
-    )
-}
 
 export default Renderer25D

src/components/renderer/RendererBase.js

@@ -1,7 +1,8 @@
 import React, { useEffect } from "react";
-import {defaultViewBox, rand} from "../../utils/util";
 import {ParamTypes} from "../../constant/ParamTypes";
 import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
+import {createRenderer} from "../style/Renderer";
+import {rand} from "../../utils/util";
 
 function listPoints(qrcode, params) {
     if (!qrcode) return []
@@ -71,7 +72,7 @@ function listPoints(qrcode, params) {
     return pointList;
 }
 
-function getParamInfo() {
+function getParamInfoRect() {
     return [
         {
             type: ParamTypes.SELECTOR,
@@ -116,17 +117,107 @@ function getParamInfo() {
     ];
 }
 
-const RendererBase = ({ qrcode, params, setParamInfo}) => {
+function getParamInfoRound() {
-    useEffect(() => {
+    return [
-        setParamInfo(getParamInfo());
+        {
-    }, [setParamInfo]);
+            type: ParamTypes.SELECTOR,
-
+            key: '信息点样式',
-    return (
+            default: 1,
-        <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
+            choices: [
-             xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+                "矩形",
-            {listPoints(qrcode, params)}
+                "圆形",
-        </svg>
+                "随机"
-    )
+            ]
+        },
+        {
+            type: ParamTypes.TEXT_EDITOR,
+            key: '信息点缩放',
+            default: 50
+        },
+        {
+            type: ParamTypes.TEXT_EDITOR,
+            key: '信息点不透明度',
+            default: 30,
+        },
+        {
+            type: ParamTypes.SELECTOR,
+            key: '定位点样式',
+            default: 1,
+            choices: [
+                "矩形",
+                "圆形",
+                "行星",
+            ]
+        },
+        {
+            type: ParamTypes.COLOR_EDITOR,
+            key: '信息点颜色',
+            default: '#000000'
+        },
+        {
+            type: ParamTypes.COLOR_EDITOR,
+            key: '定位点点颜色',
+            default: '#000000'
+        }
+    ];
 }
 
-export default RendererBase
+function getParamInfoRandRound() {
+    return [
+        {
+            type: ParamTypes.SELECTOR,
+            key: '信息点样式',
+            default: 2,
+            choices: [
+                "矩形",
+                "圆形",
+                "随机"
+            ]
+        },
+        {
+            type: ParamTypes.TEXT_EDITOR,
+            key: '信息点缩放',
+            default: 80
+        },
+        {
+            type: ParamTypes.TEXT_EDITOR,
+            key: '信息点不透明度',
+            default: 100,
+        },
+        {
+            type: ParamTypes.SELECTOR,
+            key: '定位点样式',
+            default: 2,
+            choices: [
+                "矩形",
+                "圆形",
+                "行星",
+            ]
+        },
+        {
+            type: ParamTypes.COLOR_EDITOR,
+            key: '信息点颜色',
+            default: '#000000'
+        },
+        {
+            type: ParamTypes.COLOR_EDITOR,
+            key: '定位点点颜色',
+            default: '#000000'
+        }
+    ];
+}
+
+export const RendererRect= createRenderer({
+    listPoints: listPoints,
+    getParamInfo: getParamInfoRect,
+});
+
+export const RendererRound = createRenderer({
+    listPoints: listPoints,
+    getParamInfo: getParamInfoRound,
+});
+
+export const RendererRandRound = createRenderer({
+    listPoints: listPoints,
+    getParamInfo: getParamInfoRandRound,
+});

src/components/renderer/RendererBlank.js

@@ -1,25 +1,6 @@
-import React, { useEffect } from "react";
+import React from "react";
-import {defaultViewBox} from "../../utils/util";
+import {createRenderer} from "../style/Renderer";
 
-function listPoints(qrcode, params) {
+const RenderBlank = createRenderer()
-    return []
-}
-
-function getParamInfo() {
-    return [];
-}
-
-const RenderBlank = ({ qrcode, params, setParamInfo}) => {
-    useEffect(() => {
-        setParamInfo(getParamInfo());
-    }, [setParamInfo]);
-
-    return (
-        <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
-             xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
-            {listPoints(qrcode, params)}
-        </svg>
-    )
-}
 
 export default RenderBlank

src/components/renderer/RendererDSJ.js

@@ -1,7 +1,7 @@
-import React, { useEffect } from "react";
+import React from "react";
-import {defaultViewBox} from "../../utils/util";
 import {ParamTypes} from "../../constant/ParamTypes";
 import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
+import {createRenderer} from "../style/Renderer";
 
 function listPoints(qrcode, params) {
     if (!qrcode) return []
@@ -188,17 +188,9 @@ function getParamInfo() {
     ]
 }
 
-const RenderDSJ = ({ qrcode, params, setParamInfo}) => {
+const RenderDSJ = createRenderer({
-    useEffect(() => {
+    listPoints: listPoints,
-        setParamInfo(getParamInfo());
+    getParamInfo: getParamInfo,
-    }, [setParamInfo]);
+})
-
-    return (
-        <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
-             xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
-            {listPoints(qrcode, params)}
-        </svg>
-    )
-}
 
 export default RenderDSJ

src/components/renderer/RendererRandRect.js

@@ -1,5 +1,6 @@
 import React, { useEffect } from "react";
 import {defaultViewBox, rand} from "../../utils/util";
+import {createRenderer} from "../style/Renderer";
 
 function listPoints(qrcode, params) {
     if (!qrcode) return []
@@ -40,17 +41,9 @@ function getParamInfo() {
     return []
 }
 
-const RendererRandRect = ({ qrcode, params, setParamInfo}) => {
+const RendererRandRect = createRenderer({
-    useEffect(() => {
+    listPoints: listPoints,
-        setParamInfo(getParamInfo());
+    getParamInfo: getParamInfo
-    }, [setParamInfo]);
+})
-
-    return (
-        <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
-             xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
-            {listPoints(qrcode, params)}
-        </svg>
-    )
-}
 
 export default RendererRandRect

src/components/renderer/RendererRandRound.js

@@ -1,132 +0,0 @@
-import React, { useEffect } from "react";
-import {defaultViewBox, rand} from "../../utils/util";
-import {ParamTypes} from "../../constant/ParamTypes";
-import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
-
-function listPoints(qrcode, params) {
-    if (!qrcode) return []
-
-    const nCount = qrcode.getModuleCount();
-    const typeTable = getTypeTable(qrcode);
-    const pointList = new Array(nCount);
-
-    let type = params[0];
-    let size = params[1] / 100;
-    let opacity = params[2] / 100;
-    let posType = params[3];
-    let id = 0;
-    let otherColor = params[4];
-    let posColor = params[5];
-
-    const vw = [3, -3];
-    const vh = [3, -3];
-
-    if (size <= 0) size = 1.0
-
-    for (let x = 0; x < nCount; x++) {
-        for (let y = 0; y < nCount; y++) {
-            if (qrcode.isDark(x, y) == false) continue;
-
-            if (typeTable[x][y] == QRPointType.ALIGN_CENTER || typeTable[x][y] == QRPointType.ALIGN_OTHER || typeTable[x][y] == QRPointType.TIMING) {
-                if (type == 0)
-                    pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColor} x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
-                else if (type == 1)
-                    pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5}/>)
-                else if (type == 2)
-                    pointList.push(<circle key={id++} opacity={opacity} fill={otherColor} cx={x + 0.5} cy={y + 0.5} r={size / 2} />)
-            }
-            else if (typeTable[x][y] == QRPointType.POS_CENTER) {
-                if (posType == 0) {
-                    pointList.push(<rect width={1} height={1} key={id++} fill={posColor} x={x} y={y}/>);
-                } else if (posType == 1) {
-                    pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + 0.5} r={1.5} />)
-                    pointList.push(<circle key={id++} fill="none" strokeWidth="1" stroke={posColor}  cx={x + 0.5} cy={y + 0.5} r={3} />)
-                } else if (posType == 2) {
-                    pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + 0.5} r={1.5} />)
-                    pointList.push(<circle key={id++} fill="none" strokeWidth="0.15" strokeDasharray="0.5,0.5" stroke={posColor}  cx={x + 0.5} cy={y + 0.5} r={3} />)
-                    for (let w = 0; w < vw.length; w++) {
-                        pointList.push(<circle key={id++} fill={posColor} cx={x + vw[w] + 0.5} cy={y + 0.5} r={0.5} />)
-                    }
-                    for (let h = 0; h < vh.length; h++) {
-                        pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + vh[h] + 0.5} r={0.5} />)
-                    }
-                }
-            }
-            else if (typeTable[x][y] == QRPointType.POS_OTHER) {
-                if (posType == 0) {
-                    pointList.push(<rect width={1} height={1} key={id++} fill={posColor} x={x} y={y}/>);
-                }
-            }
-            else {
-                if (type == 0)
-                    pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColor} x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
-                else if (type == 1)
-                    pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5}/>)
-                else if (type == 2)
-                    pointList.push(<circle opacity={opacity}  key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5} r={0.5 * rand(0.33,1.0)} />)
-            }
-        }
-    }
-
-    return pointList;
-}
-
-function getParamInfo() {
-    return [
-        {
-            type: ParamTypes.SELECTOR,
-            key: '信息点样式',
-            default: 2,
-            choices: [
-                "矩形",
-                "圆形",
-                "随机"
-            ]
-        },
-        {
-            type: ParamTypes.TEXT_EDITOR,
-            key: '信息点缩放',
-            default: 80
-        },
-        {
-            type: ParamTypes.TEXT_EDITOR,
-            key: '信息点不透明度',
-            default: 100,
-        },
-        {
-            type: ParamTypes.SELECTOR,
-            key: '定位点样式',
-            default: 2,
-            choices: [
-                "矩形",
-                "圆形",
-                "行星",
-            ]
-        },
-        {
-            type: ParamTypes.COLOR_EDITOR,
-            key: '信息点颜色',
-            default: '#000000'
-        },
-        {
-            type: ParamTypes.COLOR_EDITOR,
-            key: '定位点点颜色',
-            default: '#000000'
-        }
-    ];
-}
-
-const RendererBase = ({ qrcode, params, setParamInfo}) => {
-    useEffect(() => {
-        setParamInfo(getParamInfo());
-    }, [setParamInfo]);
-
-    return (
-        <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
-             xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
-            {listPoints(qrcode, params)}
-        </svg>
-    )
-}
-
-export default RendererBase

src/components/renderer/RendererRound.js

@@ -1,132 +0,0 @@
-import React, { useEffect } from "react";
-import {defaultViewBox, rand} from "../../utils/util";
-import {ParamTypes} from "../../constant/ParamTypes";
-import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
-
-function listPoints(qrcode, params) {
-    if (!qrcode) return []
-
-    const nCount = qrcode.getModuleCount();
-    const typeTable = getTypeTable(qrcode);
-    const pointList = new Array(nCount);
-
-    let type = params[0];
-    let size = params[1] / 100;
-    let opacity = params[2] / 100;
-    let posType = params[3];
-    let id = 0;
-    let otherColor = params[4];
-    let posColor = params[5];
-
-    const vw = [3, -3];
-    const vh = [3, -3];
-
-    if (size <= 0) size = 1.0
-
-    for (let x = 0; x < nCount; x++) {
-        for (let y = 0; y < nCount; y++) {
-            if (qrcode.isDark(x, y) == false) continue;
-
-            if (typeTable[x][y] == QRPointType.ALIGN_CENTER || typeTable[x][y] == QRPointType.ALIGN_OTHER || typeTable[x][y] == QRPointType.TIMING) {
-                if (type == 0)
-                    pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColor} x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
-                else if (type == 1)
-                    pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5}/>)
-                else if (type == 2)
-                    pointList.push(<circle key={id++} opacity={opacity} fill={otherColor} cx={x + 0.5} cy={y + 0.5} r={size / 2} />)
-            }
-            else if (typeTable[x][y] == QRPointType.POS_CENTER) {
-                if (posType == 0) {
-                    pointList.push(<rect width={1} height={1} key={id++} fill={posColor} x={x} y={y}/>);
-                } else if (posType == 1) {
-                    pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + 0.5} r={1.5} />)
-                    pointList.push(<circle key={id++} fill="none" strokeWidth="1" stroke={posColor}  cx={x + 0.5} cy={y + 0.5} r={3} />)
-                } else if (posType == 2) {
-                    pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + 0.5} r={1.5} />)
-                    pointList.push(<circle key={id++} fill="none" strokeWidth="0.15" strokeDasharray="0.5,0.5" stroke={posColor}  cx={x + 0.5} cy={y + 0.5} r={3} />)
-                    for (let w = 0; w < vw.length; w++) {
-                        pointList.push(<circle key={id++} fill={posColor} cx={x + vw[w] + 0.5} cy={y + 0.5} r={0.5} />)
-                    }
-                    for (let h = 0; h < vh.length; h++) {
-                        pointList.push(<circle key={id++} fill={posColor} cx={x + 0.5} cy={y + vh[h] + 0.5} r={0.5} />)
-                    }
-                }
-            }
-            else if (typeTable[x][y] == QRPointType.POS_OTHER) {
-                if (posType == 0) {
-                    pointList.push(<rect width={1} height={1} key={id++} fill={posColor} x={x} y={y}/>);
-                }
-            }
-            else {
-                if (type == 0)
-                    pointList.push(<rect opacity={opacity} width={size} height={size} key={id++} fill={otherColor} x={x + (1 - size)/2} y={y + (1 - size)/2}/>)
-                else if (type == 1)
-                    pointList.push(<circle opacity={opacity} r={size / 2} key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5}/>)
-                else if (type == 2)
-                    pointList.push(<circle opacity={opacity}  key={id++} fill={otherColor} cx={x + 0.5} cy={y + 0.5} r={0.5 * rand(0.33,1.0)} />)
-            }
-        }
-    }
-
-    return pointList;
-}
-
-function getParamInfo() {
-    return [
-        {
-            type: ParamTypes.SELECTOR,
-            key: '信息点样式',
-            default: 1,
-            choices: [
-                "矩形",
-                "圆形",
-                "随机"
-            ]
-        },
-        {
-            type: ParamTypes.TEXT_EDITOR,
-            key: '信息点缩放',
-            default: 50
-        },
-        {
-            type: ParamTypes.TEXT_EDITOR,
-            key: '信息点不透明度',
-            default: 30,
-        },
-        {
-            type: ParamTypes.SELECTOR,
-            key: '定位点样式',
-            default: 1,
-            choices: [
-                "矩形",
-                "圆形",
-                "行星",
-            ]
-        },
-        {
-            type: ParamTypes.COLOR_EDITOR,
-            key: '信息点颜色',
-            default: '#000000'
-        },
-        {
-            type: ParamTypes.COLOR_EDITOR,
-            key: '定位点点颜色',
-            default: '#000000'
-        }
-    ];
-}
-
-const RendererBase = ({ qrcode, params, setParamInfo}) => {
-    useEffect(() => {
-        setParamInfo(getParamInfo());
-    }, [setParamInfo]);
-
-    return (
-        <svg className="Qr-item-svg" width="100%" height="100%" viewBox={defaultViewBox(qrcode)} fill="white"
-             xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
-            {listPoints(qrcode, params)}
-        </svg>
-    )
-}
-
-export default RendererBase

src/components/style/Renderer.js

@@ -1,4 +1,5 @@
-import React from "react";
+import React, {useEffect} from "react";
+import {extend} from "../../utils/util";
 
 const Renderer = ({ rendererType, ...other }) => (
     React.createElement(rendererType, other)
@@ -8,4 +9,38 @@ function areEqual(prevProps, nextProps) {
     return !(prevProps.selected == true || nextProps.selected == true)
 }
 
+export function createRenderer(renderer) {
+    let defaultViewBox = function (qrcode) {
+        if (!qrcode) return '0 0 0 0';
+
+        const nCount = qrcode.getModuleCount();
+        return String(-nCount / 5) + ' ' + String(-nCount / 5) + ' ' + String(nCount + nCount / 5 * 2) + ' ' + String(nCount + nCount / 5 * 2);
+    }
+
+    renderer = extend({
+        getViewBox: defaultViewBox,
+        listPoints: (qrcode, params) => { return []; },
+        getParamInfo: () => {return []; },
+        beginRendering: ({ qrcode, params, setParamInfo }) => {},
+        beforeListing: ({ qrcode, params, setParamInfo }) => {},
+        afterListing: ({ qrcode, params, setParamInfo }) => {},
+    }, renderer);
+
+    return ({ qrcode, params, setParamInfo}) => {
+        useEffect(() => {
+            setParamInfo(renderer.getParamInfo());
+        }, [setParamInfo]);
+
+        renderer.beginRendering({ qrcode, params, setParamInfo });
+        return (
+            <svg className="Qr-item-svg" width="100%" height="100%" viewBox={renderer.getViewBox(qrcode)} fill="white"
+                 xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+                {renderer.beforeListing({ qrcode, params, setParamInfo })}
+                {renderer.listPoints(qrcode, params)}
+                {renderer.afterListing({ qrcode, params, setParamInfo })}
+            </svg>
+        );
+    }
+}
+
 export default React.memo(Renderer, areEqual)

src/containers/style/StyleListViewer.js

@@ -2,18 +2,16 @@ import {connect} from 'react-redux';
 import {changeStyle} from "../../actions";
 import StyleList from "../../components/style/StyleList";
 import RendererViewer from "./RendererViewer";
-import RendererBase from "../../components/renderer/RendererBase";
 import RendererDSJ from "../../components/renderer/RendererDSJ";
-import RendererRound from "../../components/renderer/RendererRound";
-import RendererRandRound from "../../components/renderer/RendererRandRound";
 import RendererRandRect from "../../components/renderer/RendererRandRect";
 import Renderer25D from "../../components/renderer/Renderer25D";
 import RendererImage from "../../components/renderer/RendererImage";
-import * as React from "react";
 import RendererResImage from "../../components/renderer/RendererResImage";
+import {RendererRandRound, RendererRect, RendererRound} from "../../components/renderer/RendererBase";
+import * as React from "react";
 
 const styles = [
-    {value: "A1", renderer: RendererBase},
+    {value: "A1", renderer: RendererRect},
     {value: "A2", renderer: RendererRound},
     {value: "A3", renderer: RendererRandRound},
     {value: "SP — 1", renderer: RendererDSJ},

src/reducers/index.js

@@ -1,13 +1,13 @@
 import {encodeData} from "../utils/qrcodeHandler";
 import {actionTypes} from "../constant/ActionTypes";
 import {QRBTF_URL} from "../constant/References";
-import RendererBase from "../components/renderer/RendererBase";
 import {getExactValue} from "../utils/util";
+import {RendererRect} from "../components/renderer/RendererBase";
 
 const initialState = {
     selectedIndex: 0,
     value: 'A1',
-    rendererType: RendererBase,
+    rendererType: RendererRect,
     correctLevel: 0,
     textUrl: QRBTF_URL,
     history: [],

src/utils/qrcodeHandler.js

@@ -1,12 +1,6 @@
 import { qrcode as QRCodeEncoder } from "./qrcodeEncoder";
 import jsQR from "jsqr";
-
+import { extend } from "./util";
-function extend(target, options) {
-    for (let name in options) {
-        target[name] = options[name]
-    }
-    return target
-}
 
 export var QRPointType = {
     DATA: 0,

src/utils/util.js

@@ -82,6 +82,13 @@ export function getExactValue(value, defaultValue) {
     return value;
 }
 
+export function extend(target, options) {
+    for (let name in options) {
+        target[name] = options[name]
+    }
+    return target
+}
+
 export function toBase64(file, width, height) {
     let canvas = document.createElement('canvas');
     let ctx = canvas.getContext('2d');