From 1815a1c16075277c2033a54ce4b33e7ad5351029 Mon Sep 17 00:00:00 2001 From: wzhqwq Date: Sat, 31 Jul 2021 10:34:39 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E4=B8=8A=E4=BC=A0=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E7=9A=84=E6=94=BE=E5=A4=A7=E6=9F=A5=E7=9C=8B=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/UploadUnit/UploadUnit.js | 53 ++++++++++++++++++++--- src/components/UploadUnit/upload.css | 20 +++++++++ src/components/UserControl/UserControl.js | 3 ++ src/helper/alert.js | 5 +-- src/helper/axios.js | 11 ++--- src/upload/upload.js | 5 ++- 6 files changed, 82 insertions(+), 15 deletions(-) diff --git a/src/components/UploadUnit/UploadUnit.js b/src/components/UploadUnit/UploadUnit.js index 15f7b83..f786a88 100644 --- a/src/components/UploadUnit/UploadUnit.js +++ b/src/components/UploadUnit/UploadUnit.js @@ -1,10 +1,14 @@ import './upload.css'; -import { Component, Fragment } from "react"; +import { Component, createRef, Fragment } from "react"; import { apis } from '../../helper/apis'; import Spinner from '../Spinner/Spinner'; export default class UploadUnit extends Component { + imgRef = createRef(); + imgWidth; + imgHeight; + constructor(props) { super(props); this.state = { @@ -13,10 +17,14 @@ export default class UploadUnit extends Component { src: null, file: null, progress: 0, - width: 0 + width: 0, + isScaled: false, + transform: '' }; this.upload = this.upload.bind(this); this.handleCancel = this.handleCancel.bind(this); + this.scale = this.scale.bind(this); + this.unscale = this.unscale.bind(this); } componentDidMount() { @@ -73,10 +81,12 @@ export default class UploadUnit extends Component { } canvas.width = width; canvas.height = height; + this.imgWidth = width; + this.imgHeight = height; canvas.getContext('2d').drawImage(img, 0, 0, width, height); canvas.toBlob(blob => { - this.setState({ src: canvas.toDataURL('image/jpeg', 0.8), status: 2, file: blob, width: width / height * 200 }); - }, 'image/jpeg', 0.8); + this.setState({ src: canvas.toDataURL('image/jpeg', 1), status: 2, file: blob, width: width / height * 200 }); + }, 'image/jpeg', 1); } async upload() { @@ -119,13 +129,41 @@ export default class UploadUnit extends Component { this.setState({ status: 3, progress: 0 }); } + scale() { + if (this.state.isScaled) return; + let el = this.imgRef.current; + let { x, y } = el.getBoundingClientRect(); + let { innerWidth, innerHeight } = window; + console.log(x, y, innerWidth, innerHeight); + let initialScale = 200 / this.imgHeight, + terminalScale = Math.min(1, Math.min(innerWidth / this.imgWidth, innerHeight / this.imgHeight)); + this.setState({ transform: `translate(${x - (innerWidth - this.imgWidth * terminalScale) / 2}px, ${y - (innerHeight - this.imgHeight * terminalScale) / 2}px) scale(${initialScale})`, isScaled: true }); + setTimeout(() => { + this.setState({ transform: `translate(0, 0) scale(${terminalScale})` }); + }, 0); + } + + unscale() { + if (!this.state.isScaled) return; + let el = this.imgRef.current; + let { x, y } = el.getBoundingClientRect(); + let { innerWidth, innerHeight } = window; + let initialScale = 200 / this.imgHeight, + terminalScale = Math.min(1, Math.min(innerWidth / this.imgWidth, innerHeight / this.imgHeight)); + this.setState({ transform: `translate(${x - (innerWidth - this.imgWidth * terminalScale) / 2}px, ${y - (innerHeight - this.imgHeight * terminalScale) / 2}px) scale(${initialScale})`, isScaled: true }); + setTimeout(() => { + this.setState({ isScaled: false }); + }, 300); + } + render() { const angle = this.state.progress / 100 * Math.PI * 2; + console.log(this.state.transform); return (
{this.state.src - ? 压缩后的图片 + ? 压缩后的图片 : null } {this.state.status >= 0 @@ -173,7 +211,7 @@ export default class UploadUnit extends Component { } {this.state.status === 2 || this.state.status === 4 ? ( - ) : null @@ -186,6 +224,9 @@ export default class UploadUnit extends Component { ) : null }
+
+ 压缩后的图片 +
); } diff --git a/src/components/UploadUnit/upload.css b/src/components/UploadUnit/upload.css index c107e24..4017da3 100644 --- a/src/components/UploadUnit/upload.css +++ b/src/components/UploadUnit/upload.css @@ -79,4 +79,24 @@ to { filter: opacity(1); } +} + +.scaled-wrap { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + align-items: center; + justify-content: center; + display: none; + z-index: 1; +} +.scaled-wrap.open { + display: flex; + background-color: #0008; +} +.scaled-wrap > img { + transition: transform .3s ease-out; + transform-origin: top left; } \ No newline at end of file diff --git a/src/components/UserControl/UserControl.js b/src/components/UserControl/UserControl.js index bda17fc..064ad59 100644 --- a/src/components/UserControl/UserControl.js +++ b/src/components/UserControl/UserControl.js @@ -5,6 +5,7 @@ import Spinner from '../Spinner/Spinner'; import { get } from '../../helper/axios'; import { apis } from '../../helper/apis'; import { alert } from '../../helper/alert'; +import History from '../../helper/history'; export default function UserControl(props) { return ( @@ -33,6 +34,8 @@ export default function UserControl(props) {
{userData.name || "加载中"}
{ (() => { + if (userData.role !== 2 && History.getHref().match(/^\/admin.*/)) + History.force('/'); if (userData.role !== -1) return null; get(apis.getProfile).then(({ data, status, networkStatus }) => { if (networkStatus !== 200) return; diff --git a/src/helper/alert.js b/src/helper/alert.js index 5a5a2e9..a56fdfc 100644 --- a/src/helper/alert.js +++ b/src/helper/alert.js @@ -2,11 +2,10 @@ import Swal from 'sweetalert2'; const SelfSwal = Swal.mixin({ customClass: { - confirmButton: 'btn-round-full-single', - cancelButton: 'btn-round-full-single', + confirmButton: 'btn btn-primary', + cancelButton: 'btn btn-gray', }, buttonsStyling: false, - heightAuto: false }); // ajax diff --git a/src/helper/axios.js b/src/helper/axios.js index 454c358..871842f 100644 --- a/src/helper/axios.js +++ b/src/helper/axios.js @@ -11,7 +11,7 @@ export function get(url) { "Allow-Control-Allow-Origin": "*" } }), - () => get(url) + () => ({ fn: get(url), identifier: 'get:' + url }) ); } export function post(url, data) { @@ -22,15 +22,16 @@ export function post(url, data) { "Allow-Control-Allow-Origin": "*" } }), - () => post(url, data) + () => ({ fn: post(url, data), identifier: 'post:' + url + ' ' + JSON.stringify(data) }) ); } const waitToSend = []; -async function send(xhr, retryFunc) { +async function send(xhr, retryConf) { if (waitToSend.length) { - waitToSend.push(retryFunc); + if (waitToSend.every(retryConfItem => retryConfItem.identifier !== retryConf.identifier)) + waitToSend.push(retryConf); return; } try { @@ -50,7 +51,7 @@ async function send(xhr, retryFunc) { History.force('/login'); return failData; } - waitToSend.push(retryFunc); + waitToSend.push(retryConf); if (err.message === 'Network Error') return await failed('您的设备似乎断网了，请检查网络后重试或刷新', flushWaitList) || failData; if (err?.response?.status === 504) diff --git a/src/upload/upload.js b/src/upload/upload.js index 3e2d832..2c7f36e 100644 --- a/src/upload/upload.js +++ b/src/upload/upload.js @@ -44,7 +44,10 @@ export class UploadContainer extends Component { post(apis.submitMessage, { content: this.state.msg, image: this.state.url }) .then(({ data, status, networkStatus }) => { if (networkStatus !== 200) return; - if (!status) return alert('提交内容失败：' + data); + if (!status) { + this.setState({ submitting: false }); + return alert('提交内容失败：' + data); + } this.setState({ submitting: false, msg: "", url: "", file: null }); alert('内容提交成功啦').then(({ isConfirmed }) => { if (isConfirmed) window.close();