[Style res image]

src/components/renderer/RendererResImage.js

@@ -1,5 +1,5 @@
-import React, {useEffect, useState} from "react";
-import {getGrayPointList, rand} from "../../utils/util";
+import React, {useEffect, useMemo, useState} from "react";
+import {gamma} from "../../utils/util";
 import {ParamTypes} from "../../constant/ParamTypes";
 import {getTypeTable, QRPointType} from "../../utils/qrcodeHandler";
 
@@ -60,15 +60,46 @@ export function getViewBox(qrcode) {
     return String(-nCount / 5) + ' ' + String(-nCount / 5) + ' ' + String(nCount + nCount / 5 * 2) + ' ' + String(nCount + nCount / 5 * 2);
 }
 
+function getGrayPointList(imgBase64, size, black, white) {
+    console.log(1)
+
+    let canvas = document.createElement('canvas');
+    let ctx = canvas.getContext('2d');
+    let img = document.createElement('img');
+    let gpl = [];
+    canvas.style.imageRendering = 'pixelated';
+    size *= 3;
+
+    img.src = imgBase64;
+    return new Promise(resolve => {
+        img.onload = () => {
+            canvas.width = size;
+            canvas.height = size;
+            ctx.imageSmoothingEnabled = false;
+            ctx.drawImage(img, 0, 0, size, size);
+
+            for (let x = 0; x < canvas.width; x++) {
+                for (let y = 0; y < canvas.height; y++) {
+                    let imageData = ctx.getImageData(x, y, 1, 1);
+                    let data = imageData.data;
+                    let gray = gamma(data[0], data[1], data[2]);
+                    if (Math.random() > gray / 255) gpl.push(<use key={"g_" + x + "_" + y} x={x} y={y} xlinkHref={black} />);
+                }
+            }
+            resolve(gpl);
+        }
+    })
+}
+
 const RendererResImage = ({qrcode, params, setParamInfo}) => {
     useEffect(() => {
         setParamInfo(getParamInfo());
     }, [setParamInfo]);
 
     const [gpl, setGPL] = useState([]);
-    useEffect(() => {
+    useMemo(() => {
         getGrayPointList(params[0], qrcode.getModuleCount(), "#S-black", "#S-white").then(res => setGPL(res));
-    }, [params[0], qrcode])
+    }, [setGPL, params[0], qrcode])
 
     return (
         <svg className="Qr-item-svg" width="100%" height="100%" viewBox={getViewBox(qrcode)} fill="white"
@@ -79,7 +110,6 @@ const RendererResImage = ({qrcode, params, setParamInfo}) => {
                 <rect id="S-black" fill="black" width={1} height={1}/>
                 <rect id="S-white" fill="white" width={1} height={1}/>
             </defs>
-
             {gpl.concat(listPoints(qrcode, params))}
         </svg>
     )

src/containers/app/PartDownloadViewer.js

@@ -4,7 +4,7 @@ import React from "react";
 import {saveImg, saveSvg} from "../../utils/downloader";
 import ReactDOMServer from "react-dom/server";
 import {increaseDownloadData, recordDownloadDetail} from "../../api/db";
-import {getParamDetailedValue} from "../../utils/util";
+import {getParamDetailedValue, outerHtml} from "../../utils/util";
 
 function saveEl(state, type) {
     const el = React.createElement(state.rendererType, {
@@ -31,10 +31,12 @@ function saveEl(state, type) {
 const mapStateToProps = (state) => ({
     value: state.value,
     onSvgDownload: () => {
-        saveSvg(state.value, ReactDOMServer.renderToString(saveEl(state, 'svg')))
+        // saveSvg(state.value, ReactDOMServer.renderToString(saveEl(state, 'svg')))
+        saveSvg(state.value, outerHtml(state.selectedIndex))
     },
     onJpgDownload: () => {
-        return saveImg(state.value, ReactDOMServer.renderToString(saveEl(state, 'jpg')), 1500, 1500)
+        // return saveImg(state.value, ReactDOMServer.renderToString(saveEl(state, 'jpg')), 1500, 1500)
+        return saveImg(state.value, outerHtml(state.selectedIndex), 1500, 1500)
     }
 })
 

src/utils/util.js

@@ -43,38 +43,12 @@ export function getParamDetailedValue(item, paramValue) {
     return paramValue;
 }
 
-export function gamma(r, g, b) {
-    return Math.pow((Math.pow(r, 2.2) + Math.pow(1.5 * g, 2.2) + Math.pow(0.6 * b, 2.2)) / (1 + Math.pow(1.5, 2.2) + Math.pow(0.6, 2.2)), 1/2.2)
+export function outerHtml(selectedIndex) {
+    return document.getElementsByClassName('Qr-item-svg')[selectedIndex].outerHTML;
 }
 
-export function getGrayPointList(imgBase64, size, black, white) {
-    let canvas = document.createElement('canvas');
-    let ctx = canvas.getContext('2d');
-    let img = document.createElement('img');
-    let gpl = [];
-    canvas.style.imageRendering = 'pixelated';
-    size *= 3;
-
-    img.src = imgBase64;
-    return new Promise(resolve => {
-        img.onload = () => {
-            canvas.width = size;
-            canvas.height = size;
-            ctx.imageSmoothingEnabled = false;
-            ctx.drawImage(img, 0, 0, size, size);
-
-            for (let x = 0; x < canvas.width; x++) {
-                for (let y = 0; y < canvas.height; y++) {
-                    let imageData = ctx.getImageData(x, y, 1, 1);
-                    let data = imageData.data;
-                    let gray = gamma(data[0], data[1], data[2]);
-                    if (Math.random() <= gray / 255) gpl.push(<use key={"g_" + x + "_" + y} x={x} y={y} xlinkHref={white} />);
-                    else gpl.push(<use key={"g_" + x + "_" + y} x={x} y={y} xlinkHref={black} />);
-                }
-            }
-            resolve(gpl);
-        }
-    })
+export function gamma(r, g, b) {
+    return Math.pow((Math.pow(r, 2.2) + Math.pow(1.5 * g, 2.2) + Math.pow(0.6 * b, 2.2)) / (1 + Math.pow(1.5, 2.2) + Math.pow(0.6, 2.2)), 1/2.2)
 }
 
 export function toBase64(file, width, height) {