[Style res image]

src/components/app/PartStyles.js

@@ -9,7 +9,6 @@ const PartStyles = ({ setParamInfo }) => {
     }, [])
 
     const styleList = React.createElement(StyleListViewer({setParamInfo}))
-    console.log(loaded)
 
     return (<div className="Qr-titled">
         <div className="Qr-Centered title-margin">

src/components/renderer/RendererResImage.js

@@ -0,0 +1,88 @@
+import React, {useEffect, useState} from "react";
+import {getGrayPointList, 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 id = 0;
+    for (let x = 0; x < nCount; x++) {
+        for (let y = 0; y < nCount; y++) {
+            const posX = 3 * x + 1, posY = 3 * y + 1;
+            if (typeTable[x][y] == QRPointType.ALIGN_CENTER || typeTable[x][y] == QRPointType.ALIGN_OTHER || typeTable[x][y] == QRPointType.TIMING) {
+                if (qrcode.isDark(x, y)) {
+                    pointList.push(<use key={id++} xlinkHref="#B-black" x={posX} y={posY}/>)
+                } else {
+                    pointList.push(<use key={id++} xlinkHref="#B-white" x={posX} y={posY}/>)
+                }
+            } else if (typeTable[x][y] == QRPointType.POS_CENTER) {
+                if (qrcode.isDark(x, y)) {
+                    pointList.push(<use key={id++} xlinkHref="#B-black" x={posX} y={posY}/>)
+                }
+            } else if (typeTable[x][y] == QRPointType.POS_OTHER) {
+                if (qrcode.isDark(x, y)) {
+                    pointList.push(<use key={id++} xlinkHref="#B-black" x={posX} y={posY}/>)
+                } else {
+                    pointList.push(<use key={id++} xlinkHref="#B-white" x={posX} y={posY}/>)
+                }
+            } else {
+                if (qrcode.isDark(x, y)) {
+                    pointList.push(<use key={id++} xlinkHref="#S-black" x={posX} y={posY}/>)
+                } else {
+                    pointList.push(<use key={id++} xlinkHref="#S-white" x={posX} y={posY}/>)
+                }
+            }
+        }
+    }
+
+    return pointList;
+}
+
+function getParamInfo() {
+    return [
+        {
+            type: ParamTypes.UPLOAD_BUTTON,
+            key: '背景图片',
+            default: 0,
+        }
+    ];
+}
+
+export function getViewBox(qrcode) {
+    if (!qrcode) return '0 0 0 0';
+
+    const nCount = qrcode.getModuleCount() * 3;
+    return String(-nCount / 5) + ' ' + String(-nCount / 5) + ' ' + String(nCount + nCount / 5 * 2) + ' ' + String(nCount + nCount / 5 * 2);
+}
+
+const RendererResImage = ({qrcode, params, setParamInfo}) => {
+    useEffect(() => {
+        setParamInfo(getParamInfo());
+    }, [setParamInfo]);
+
+    const [gpl, setGPL] = useState([]);
+    useEffect(() => {
+        getGrayPointList(params[0], qrcode.getModuleCount(), "#B-black", "#B-white").then(res => setGPL(res));
+    }, [params[0]])
+
+    return (
+        <svg className="Qr-item-svg" width="100%" height="100%" viewBox={getViewBox(qrcode)} fill="white"
+             xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
+            <defs>
+                <rect id="B-black" fill="black" width={3} height={3}/>
+                <rect id="B-white" fill="white" width={3} height={3}/>
+                <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>
+    )
+}
+
+export default RendererResImage

src/containers/style/StyleListViewer.js

@@ -11,6 +11,7 @@ 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";
 
 const styles = [
     {value: "A1", renderer: RendererBase},
@@ -20,7 +21,7 @@ const styles = [
     {value: "SP — 2", renderer: RendererRandRect},
     {value: "B1", renderer: Renderer25D},
     {value: "C1", renderer: RendererImage},
-    {value: "D1", renderer: RendererBlank},
+    {value: "C2", renderer: RendererResImage},
 ]
 
 const paramInfoBuffer = new Array(16).fill(new Array(16))

src/reducers/index.js

@@ -16,7 +16,6 @@ const initialState = {
 }
 
 export default function appReducer(state = initialState, action) {
-    console.log(state.paramValue)
     switch (action.type) {
         case actionTypes.GENERATE_QR_INFO: {
             let text = action.text;
@@ -57,7 +56,6 @@ export default function appReducer(state = initialState, action) {
                     let newValue = action.value;
                     if (newValue.length <= 0)
                         newValue = state.paramInfo[action.rendererIndex][action.paramIndex].default;
-                    console.log(newValue)
 
                     if (!isNaN(newValue)) newValue = parseInt(newValue);
                     newItem[action.paramIndex] = newValue;

src/utils/util.js

@@ -1,4 +1,5 @@
 import {ParamTypes} from "../constant/ParamTypes";
+import React from "react";
 
 let seed = 0;
 
@@ -42,7 +43,41 @@ export function getParamDetailedValue(item, paramValue) {
     return paramValue;
 }
 
-export async function toBase64(file, width, height) {
+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 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 = 1; x < canvas.width - 1; x++) {
+                for (let y = 1; y < canvas.height - 1; 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 toBase64(file, width, height) {
     let canvas = document.createElement('canvas');
     let ctx = canvas.getContext('2d');
     let img = document.createElement('img');