参数分栏、微信端图片下载优化
This commit is contained in:
ciaochaos
parent
4fa9dae189
commit
6870b8b127
|
|
@ -103,9 +103,38 @@
|
|||
@media (min-width: 500px) {
|
||||
.Qr-item-image {
|
||||
border: rgba(0,0,0,0.12) solid 3px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
#dl-image {
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
#dl-image-inner {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
border-radius: 20px;
|
||||
box-sizing: border-box;
|
||||
border: rgba(0,0,0,0.12) solid 2px;
|
||||
width: calc((100vw - 56px) / 2);
|
||||
height: calc((100vw - 56px) / 2);
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
#dl-image-inner {
|
||||
border: rgba(0,0,0,0.12) solid 3px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
#dl-image-inner-jpg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.Qr-item-image-inner {
|
||||
justify-content: center;
|
||||
-webkit-transition-timing-function: ease-in-out;
|
||||
|
|
@ -118,13 +147,6 @@
|
|||
-moz-transform: translateZ(0);
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.Qr-item-image {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.Qr-item-selected .Qr-item-image {
|
||||
border-color: #44D7B6 !important;
|
||||
}
|
||||
|
|
@ -177,10 +199,6 @@ td {
|
|||
padding: 0 0 10px 0;
|
||||
}
|
||||
|
||||
table {
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
.big-input {
|
||||
font-size: calc(10px + 2vmin);
|
||||
margin-top: calc((10px + 2vmin) * 2);
|
||||
|
|
@ -301,16 +319,26 @@ input[type="number"]{
|
|||
|
||||
|
||||
.Qr-table {
|
||||
max-width: 410px;
|
||||
width: 100%;
|
||||
border-spacing: 0;
|
||||
margin-top: 23px;
|
||||
}
|
||||
|
||||
.Qr-div-table {
|
||||
max-width: 410px;
|
||||
margin-bottom: -10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.btn-row:nth-last-child(1) {
|
||||
@media (min-width: 886px) {
|
||||
.Qr-div-table {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-row {
|
||||
margin-bottom: -10px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import {isWeiXin} from "../../utils/util";
|
|||
|
||||
const WxMessage = () => {
|
||||
if (isWeiXin()) {
|
||||
return <div className="note-font" id="wx-message-inner">当前客户端不支持下载，请长按图片保存。</div>
|
||||
return <div className="note-font" id="wx-message-inner">当前客户端不支持下载 SVG，<br />请下载 JPG 并长按二维码保存。</div>
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
|
@ -20,20 +20,25 @@ const PartDownload = ({ value, onSvgDownload, onJpgDownload }) => {
|
|||
<p className="Qr-s-subtitle">下载二维码 — {value}</p>
|
||||
</div>
|
||||
<div className="Qr-Centered">
|
||||
<div className="div-btn">
|
||||
<button className="dl-btn" onClick={onSvgDownload}>SVG</button>
|
||||
<button className="dl-btn" onClick={() => {
|
||||
onJpgDownload().then(res => setImgData(res));
|
||||
}}>
|
||||
JPG
|
||||
</button>
|
||||
<div className="btn-row">
|
||||
<div className="div-btn">
|
||||
<button className="dl-btn" onClick={() => {
|
||||
onJpgDownload().then(res => setImgData(res));
|
||||
}}>
|
||||
JPG
|
||||
</button>
|
||||
<button className="dl-btn" onClick={onSvgDownload}>SVG</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="wx-message">
|
||||
<WxMessage/>
|
||||
</div>
|
||||
<div>
|
||||
{
|
||||
imgData.length > 0 ? <img src={imgData} width={300} height={300} alt="点击JPG下载" /> : null
|
||||
imgData.length > 0 ? <div id="dl-image" onClick={() => {
|
||||
onJpgDownload().then(res => setImgData(res));
|
||||
}}><div id="dl-image-inner"><img id="dl-image-inner-jpg" src={imgData} alt="点击JPG下载" /></div></div> : null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,12 +11,8 @@ const PartParams = () => (
|
|||
</div>
|
||||
<div className="Qr-Centered">
|
||||
<div className="Qr-div-table">
|
||||
<table className="Qr-table">
|
||||
<tbody>
|
||||
<ParamCorrectLevelViewer/>
|
||||
<ParamListViewer/>
|
||||
</tbody>
|
||||
</table>
|
||||
<ParamCorrectLevelViewer/>
|
||||
<ParamListViewer/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const ParamColor = ({ rendererIndex, paramIndex, value, onChange }) => {
|
|||
return (
|
||||
<div>
|
||||
<button className="dl-btn" onClick={ () => setDisplay(!displayColorPicker) }>
|
||||
点击选择颜色
|
||||
选择颜色
|
||||
</button>
|
||||
{
|
||||
displayColorPicker ?
|
||||
|
|
|
|||
|
|
@ -3,20 +3,24 @@ import PropTypes from 'prop-types'
|
|||
import '../Qrcode.css';
|
||||
|
||||
const ParamCorrectLevel = ({value, onChange}) => (
|
||||
<tr>
|
||||
<td>容错率</td>
|
||||
<td>
|
||||
<select
|
||||
className="Qr-select"
|
||||
value={value}
|
||||
onChange={onChange}>
|
||||
<option value={1}>7%</option>
|
||||
<option value={0}>15%</option>
|
||||
<option value={3}>25%</option>
|
||||
<option value={2}>30%</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<table className="Qr-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>容错率</td>
|
||||
<td>
|
||||
<select
|
||||
className="Qr-select"
|
||||
value={value}
|
||||
onChange={onChange}>
|
||||
<option value={1}>7%</option>
|
||||
<option value={0}>15%</option>
|
||||
<option value={3}>25%</option>
|
||||
<option value={2}>30%</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
)
|
||||
|
||||
ParamCorrectLevel.propTypes = {
|
||||
|
|
|
|||
|
|
@ -16,15 +16,19 @@ const mapTypeToComponent = ({
|
|||
const ParamList = ({ rendererIndex, paramInfo }) => (
|
||||
paramInfo.map((item, paramIndex) => {
|
||||
return (
|
||||
<tr key={"tr_" + rendererIndex + "_" + paramIndex}>
|
||||
<td>{item.key}</td>
|
||||
<td>
|
||||
{React.createElement(mapTypeToComponent[item.type], {
|
||||
rendererIndex: rendererIndex,
|
||||
paramIndex: paramIndex
|
||||
})}
|
||||
</td>
|
||||
</tr>
|
||||
<table className="Qr-table" key={"tr_" + rendererIndex + "_" + paramIndex}>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{item.key}</td>
|
||||
<td>
|
||||
{React.createElement(mapTypeToComponent[item.type], {
|
||||
rendererIndex: rendererIndex,
|
||||
paramIndex: paramIndex
|
||||
})}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
);
|
||||
})
|
||||
)
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@ function listPoints(qrcode, params) {
|
|||
const typeTable = getTypeTable(qrcode);
|
||||
const pointList = new Array(nCount);
|
||||
|
||||
let type = params[0];
|
||||
let size = params[1] / 100 / 3;
|
||||
let opacity = params[2] / 100;
|
||||
let posType = params[3];
|
||||
let type = params[1];
|
||||
let size = params[2] / 100 / 3;
|
||||
let opacity = params[3] / 100;
|
||||
let posType = params[4];
|
||||
let id = 0;
|
||||
|
||||
const vw = [3, -3];
|
||||
|
|
@ -21,7 +21,7 @@ function listPoints(qrcode, params) {
|
|||
|
||||
if (size <= 0) size = 1.0
|
||||
|
||||
pointList.push(<image key={id++} x="0" y="0" width={nCount} height={nCount} xlinkHref={params[4]}/>);
|
||||
pointList.push(<image key={id++} x="0" y="0" width={nCount} height={nCount} xlinkHref={params[0]}/>);
|
||||
|
||||
for (let x = 0; x < nCount; x++) {
|
||||
for (let y = 0; y < nCount; y++) {
|
||||
|
|
@ -95,6 +95,11 @@ function listPoints(qrcode, params) {
|
|||
|
||||
function getParamInfo() {
|
||||
return [
|
||||
{
|
||||
type: ParamTypes.UPLOAD_BUTTON,
|
||||
key: '背景图片',
|
||||
default: data,
|
||||
},
|
||||
{
|
||||
type: ParamTypes.SELECTOR,
|
||||
key: '信息点样式',
|
||||
|
|
@ -124,11 +129,6 @@ function getParamInfo() {
|
|||
"行星",
|
||||
]
|
||||
},
|
||||
{
|
||||
type: ParamTypes.UPLOAD_BUTTON,
|
||||
key: '背景图片',
|
||||
default: data,
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue