From 36485c10b4028f3490e9d904af76c6c52aa9789e Mon Sep 17 00:00:00 2001 From: CPunisher <1343316114@qq.com> Date: Thu, 14 May 2020 20:07:09 +0800 Subject: [PATCH] [Style res image] --- src/components/app/PartStyles.js | 1 - src/components/renderer/RendererResImage.js | 88 +++++++++++++++++++++ src/containers/style/StyleListViewer.js | 3 +- src/reducers/index.js | 2 - src/utils/util.js | 37 ++++++++- 5 files changed, 126 insertions(+), 5 deletions(-) create mode 100644 src/components/renderer/RendererResImage.js diff --git a/src/components/app/PartStyles.js b/src/components/app/PartStyles.js index dee3f7b..5d5ce6c 100644 --- a/src/components/app/PartStyles.js +++ b/src/components/app/PartStyles.js @@ -9,7 +9,6 @@ const PartStyles = ({ setParamInfo }) => { }, []) const styleList = React.createElement(StyleListViewer({setParamInfo})) - console.log(loaded) return (
diff --git a/src/components/renderer/RendererResImage.js b/src/components/renderer/RendererResImage.js new file mode 100644 index 0000000..d976b80 --- /dev/null +++ b/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() + } else { + pointList.push() + } + } else if (typeTable[x][y] == QRPointType.POS_CENTER) { + if (qrcode.isDark(x, y)) { + pointList.push() + } + } else if (typeTable[x][y] == QRPointType.POS_OTHER) { + if (qrcode.isDark(x, y)) { + pointList.push() + } else { + pointList.push() + } + } else { + if (qrcode.isDark(x, y)) { + pointList.push() + } else { + pointList.push() + } + } + } + } + + 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 ( + + + + + + + + + {gpl.concat(listPoints(qrcode, params))} + + ) +} + +export default RendererResImage diff --git a/src/containers/style/StyleListViewer.js b/src/containers/style/StyleListViewer.js index 0ca61c7..2121970 100644 --- a/src/containers/style/StyleListViewer.js +++ b/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)) diff --git a/src/reducers/index.js b/src/reducers/index.js index 161df17..c0fee9e 100644 --- a/src/reducers/index.js +++ b/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; diff --git a/src/utils/util.js b/src/utils/util.js index d4c1873..0d1fdeb 100644 --- a/src/utils/util.js +++ b/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(); + else gpl.push(); + } + } + resolve(gpl); + } + }) +} + +export function toBase64(file, width, height) { let canvas = document.createElement('canvas'); let ctx = canvas.getContext('2d'); let img = document.createElement('img');