diff --git a/src/components/renderer/RendererResImage.js b/src/components/renderer/RendererResImage.js index 3d86b49..d12c434 100644 --- a/src/components/renderer/RendererResImage.js +++ b/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(); + } + } + 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 ( { - {gpl.concat(listPoints(qrcode, params))} ) diff --git a/src/containers/app/PartDownloadViewer.js b/src/containers/app/PartDownloadViewer.js index ee98091..bbb2fac 100644 --- a/src/containers/app/PartDownloadViewer.js +++ b/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) } }) diff --git a/src/utils/util.js b/src/utils/util.js index 00c7248..50ae3e5 100644 --- a/src/utils/util.js +++ b/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(); - else gpl.push(); - } - } - 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) {