wzhqwq/inMyHeartFrontEnd
1
0
Fork 0
程式碼 問題 1 合併請求 專案 版本發布 Wiki 動態

完善上传页面的放大查看功能

瀏覽代碼
此提交包含在：
wzhqwq
2021-07-31 10:34:39 +08:00
父節點 1b66a5467a
當前提交 1815a1c160
共有 6 個檔案被更改，包括 82 行新增 和 15 行删除
下載 Patch 檔 下載差異檔 展開所有檔案 折疊所有檔案

53
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 (
<div className="upload-wrap">
<div className={this.state.status === -1 ? 'upload-unit' : 'upload-unit open'} style={{ width: this.state.status <= 1 ? '' : `${this.state.width}px` }}>
{this.state.src
? <img src={this.state.src} alt="压缩后的图片" style={{ filter: this.state.status === -1 ? 'opacity(0)' : '' }} />
? <img src={this.state.src} alt="压缩后的图片" style={{ filter: this.state.status === -1 ? 'opacity(0)' : '' }} ref={this.imgRef} />
: null
}
{this.state.status >= 0
@@ -173,7 +211,7 @@ export default class UploadUnit extends Component {
}
{this.state.status === 2 || this.state.status === 4
? (
<button className="btn btn-circle btn-primary">
<button className="btn btn-circle btn-primary" onClick={this.scale}>
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M959.488 920.32l-39.168 39.168a27.676444 27.676444 0 0 1-39.139556 0l-162.133333-162.133333a27.648 27.648 0 0 1 0-39.168l39.139556-39.139556a27.648 27.648 0 0 1 39.168 0l162.133333 162.104889c10.808889 10.837333 10.808889 28.359111 0 39.168zM169.358222 712.419556c-149.959111-149.959111-149.959111-393.102222 0-543.061334 149.959111-149.959111 393.073778-149.959111 543.061334 0 149.959111 149.959111 149.959111 393.102222 0 543.061334-149.987556 149.959111-393.102222 149.959111-543.061334 0zM631.324444 249.742222c-105.358222-105.386667-276.195556-105.386667-381.582222 0a269.824 269.824 0 0 0 0 381.610667A269.824 269.824 0 1 0 631.324444 249.742222z" fill="#ffffff"></path><path d="M959.488 920.32l-39.168 39.168a27.676444 27.676444 0 0 1-39.139556 0l-162.133333-162.133333a27.648 27.648 0 0 1 0-39.168l39.139556-39.139556a27.648 27.648 0 0 1 39.168 0l162.133333 162.104889c10.808889 10.837333 10.808889 28.359111 0 39.168zM169.358222 712.419556c-149.959111-149.959111-149.959111-393.102222 0-543.061334 149.959111-149.959111 393.073778-149.959111 543.061334 0 149.959111 149.959111 149.959111 393.102222 0 543.061334-149.987556 149.959111-393.102222 149.959111-543.061334 0zM631.324444 249.742222c-105.358222-105.386667-276.195556-105.386667-381.582222 0a269.824 269.824 0 0 0 0 381.610667A269.824 269.824 0 1 0 631.324444 249.742222z" fill="#ffffff"></path></svg>
</button>
) : null
@@ -186,6 +224,9 @@ export default class UploadUnit extends Component {
) : null
}
</div>
<div className={this.state.isScaled ? 'scaled-wrap open' : 'scaled-wrap'} onClick={this.unscale}>
<img className="scaled-image" src={this.state.src} alt="压缩后的图片" style={{ transform: this.state.transform }} />
</div>
</div>
);
}

20
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;
}