Skip to content

X
xiaomai-cloud-class-web
Commit de4471d5 by wufan
Options

fix:修复旋转图片预览问题

parent 95fb2f4f
Showing with 51 additions and 38 deletions
src/modules/store-manage/StoreH5DecorationTab.jsx
......@@ -2,7 +2,7 @@
* @Author: wufan
* @Date: 2020-11-30 10:47:38
* @LastEditors: wufan
* @LastEditTime: 2020-12-24 18:33:10
* @LastEditTime: 2020-12-25 19:21:23
* @Description: web店铺banner页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -12,7 +12,6 @@ import { withRouter } from "react-router-dom";
import _ from "underscore";
import PhotoClip from 'photoclip'
import { Table, Modal, message, Button } from "antd";
import { QuestionCircleOutlined } from "@ant-design/icons";
import StoreService from "@/domains/store-domain/storeService";
import {
sortableContainer,
......@@ -37,7 +36,7 @@ const SortableItem = sortableElement((props) => <tr {...props} />);
const SortableContainer = sortableContainer((props) => <tbody {...props} />);
let cutFlag = false;
class StoreWebDecoration extends React.Component {
class StoreH5Decoration extends React.Component {
constructor(props) {
super(props);
this.state = {
......@@ -201,8 +200,8 @@ class StoreWebDecoration extends React.Component {
return <SortableItem index={index} {...restProps} />;
};
// 选择暖场资源
handleSelectVideo = (file) => {
// 选择云盘资源
handleSelectImg = (file) => {
this.setState({
showSelectFileModal: false,
});
......@@ -222,12 +221,9 @@ class StoreWebDecoration extends React.Component {
() => {
setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal");
const viewImgDom = document.querySelector("#H5-preview-url-box");
const options = {
size: [500, 172],
// rotateFree: false,
ok: okBtnDom,
// view: viewImgDom,this.setState()
maxZoom: 3,
style: {
jpgFillColor: "transparent",
......@@ -259,10 +255,9 @@ class StoreWebDecoration extends React.Component {
}, 2000);
},
fail: (failInfo) => {
console.log("failInfo-----", failInfo);
message.error("图片上传失败了，请重新上传");
},
loadComplete: function (img) {
console.log('hhhh')
setTimeout(() => {
const _dataUrl = this.clip()
self.setState({
......@@ -275,7 +270,6 @@ class StoreWebDecoration extends React.Component {
if (!this.state.photoclip) {
const _photoclip = new PhotoClip("#headPicModal", options);
_photoclip.load(imageFile.ossUrl);
console.log("photoclip-222", _photoclip);
this.setState({
photoclip: _photoclip,
});
......@@ -415,7 +409,7 @@ class StoreWebDecoration extends React.Component {
onClose={() => {
this.setState({ showSelectFileModal: false });
}}
onSelect={this.handleSelectVideo}
onSelect={this.handleSelectImg}
/>
<Modal
title="设置图片"
......@@ -474,4 +468,4 @@ class StoreWebDecoration extends React.Component {
}
}
export default withRouter(StoreWebDecoration);
export default withRouter(StoreH5Decoration);
src/modules/store-manage/StoreWebDecorationTab.jsx
......@@ -2,7 +2,7 @@
* @Author: wufan
* @Date: 2020-11-30 10:47:38
* @LastEditors: wufan
* @LastEditTime: 2020-12-24 18:30:46
* @LastEditTime: 2020-12-25 19:25:47
* @Description: web店铺banner页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -10,9 +10,8 @@
import React from "react";
import { withRouter } from "react-router-dom";
import _ from "underscore";
import { Table, Modal, message, Button } from "antd";
import PhotoClip from 'photoclip'
import { QuestionCircleOutlined } from "@ant-design/icons";
import { Table, Modal, message, Button } from "antd";
import StoreService from "@/domains/store-domain/storeService";
import {
sortableContainer,
......@@ -54,6 +53,8 @@ class StoreWebDecoration extends React.Component {
};
}
timer = null
componentDidMount() {
this.getStoreDecorationList();
}
......@@ -96,7 +97,7 @@ class StoreWebDecoration extends React.Component {
key: "bannerPath",
className: "drag-visible",
render: (val) => {
return <img src={val} alt="banner" className="web-banner-thumbnail" />;
return <img src={val} alt="banner" className="banner-thumbnail" />;
},
},
{
......@@ -131,6 +132,7 @@ class StoreWebDecoration extends React.Component {
message.info("最多可添加5条");
return;
}
this.setState({
showSelectFileModal: true,
choosedBannerId: ""
......@@ -211,6 +213,7 @@ class StoreWebDecoration extends React.Component {
const { folderName } = imageFile;
const fileName =
window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
const self = this;
this.setState(
{
visible: true,
......@@ -218,45 +221,63 @@ class StoreWebDecoration extends React.Component {
() => {
setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal");
const viewImgDom = document.querySelector("#preview-url-box");
const options = {
size: [500, 73],
rotateFree: false,
ok: [okBtnDom, viewImgDom],
// view: viewImgDom,
ok: okBtnDom,
maxZoom: 3,
style: {
jpgFillColor: "transparent",
},
done: (dataUrl) => {
console.log(dataUrl)
const cutImageBlob = this.convertBase64UrlToBlob(dataUrl);
this.setState({
done: function (dataUrl) {
clearTimeout(self.timer);
self.timer = setTimeout(() => {
if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
console.log(this.scale(), 'scale')
const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({
cutImageBlob,
dataUrl: _dataUrl,
rotate: this.rotate(),
scale: this.scale()
})
}
}, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({
cutImageBlob,
dataUrl
})
setTimeout(() => {
cutFlag = false;
}, 2000);
},
fail: (failInfo) => {
console.log("failInfo-----", failInfo);
message.error("图片上传失败了，请重新上传");
},
loadComplete: (img) => {
// 手动触发截取图片，第一次图片有偏差，需要两次
loadComplete: function (img) {
setTimeout(() => {
const _dataUrl = this.clip()
self.setState({
dataUrl: _dataUrl,
})
}, 100)
},
};
if (!this.state.photoclip) {
const photoclip = new PhotoClip("#headPicModal", options);
photoclip.load(imageFile.ossUrl);
console.log("photoclip-222", photoclip);
const _photoclip = new PhotoClip("#headPicModal", options);
_photoclip.load(imageFile.ossUrl);
this.setState({
photoclip,
photoclip: _photoclip,
});
} else {
this.state.photoclip.clear();
this.state.photoclip.load(imageFile.ossUrl);
}
}, 200);
}
);
......@@ -288,7 +309,6 @@ class StoreWebDecoration extends React.Component {
StoreService.editStoreBanner(params).then((res) => {
message.success("设置成功");
this.getStoreDecorationList();
this.state.photoclip.clear();
});
};
......@@ -314,7 +334,6 @@ class StoreWebDecoration extends React.Component {
StoreService.addStoreBanner(params).then((res) => {
message.success("设置成功");
this.getStoreDecorationList();
this.state.photoclip.clear();
});
};
......@@ -351,7 +370,7 @@ class StoreWebDecoration extends React.Component {
<div className="banner-setting">
<div className="title">banner设置</div>
<div className="tip">
图片支持bmp、jpeg、jpg、png、gif格式，最大5M，最多可添加5张，拖动可排序。建议尺寸1232x212像素。
图片支持bmp、jpeg、jpg、png、gif格式，最大5M，最多可添加5张，拖动可排序。建议尺寸750x252像素。
</div>
</div>
<Button
......@@ -438,8 +457,8 @@ class StoreWebDecoration extends React.Component {
<div id="clipBtn" style={{ display: "none" }} ref="hiddenBtn"></div>
<div className="preview-img">
<div className="title">效果预览</div>
<div id="preview-url-box">
<img src={this.state.dataUrl} alt="" />
<div id="H5-preview-url-box">
<img src={this.state.dataUrl} style={{ width: '100%' }} alt="" />
</div>
</div>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment