[Style res image]
This commit is contained in:
CPunisher
parent
1520ecfcf6
commit
36485c10b4
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
Loading…
Reference in New Issue