Cloned2Preserve
/
qrbtf
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Style res image]

This commit is contained in:
CPunisher 2020-05-14 21:42:15 +08:00
parent 7ddd4cf191
commit 58ebae4125
3 changed files with 44 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/renderer/RendererResImage.js
View File

@ -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>
)

8
src/containers/app/PartDownloadViewer.js
View File

@ -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)
}
})

34
src/utils/util.js
View File

@ -43,40 +43,14 @@ export function getParamDetailedValue(item, paramValue) {
return paramValue;
}
export function outerHtml(selectedIndex) {
return document.getElementsByClassName('Qr-item-svg')[selectedIndex].outerHTML;
}
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 = 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 toBase64(file, width, height) {
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');