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

de4471d5 · wufan · 95fb2f4f · de4471d5 · de4471d5
Commit de4471d5 authored Dec 25, 2020 by wufan
Show whitespace changes
Inline Side-by-side

Showing with 51 additions and 38 deletions

src/modules/store-manage/StoreH5DecorationTab.jsx
+7 -13

src/modules/store-manage/StoreWebDecorationTab.jsx
+44 -25

No files found.
--- a/src/modules/store-manage/StoreH5DecorationTab.jsx
+++ b/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);
--- a/src/modules/store-manage/StoreWebDecorationTab.jsx
+++ b/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,
-            ok: [okBtnDom, viewImgDom],
-            // view: viewImgDom,
            maxZoom: 3,
            style: {
              jpgFillColor: "transparent",
            },
-            done: (dataUrl) => {
+            done: function (dataUrl) {
-              console.log(dataUrl)
+              clearTimeout(self.timer);
-              const cutImageBlob = this.convertBase64UrlToBlob(dataUrl);
+              self.timer = setTimeout(() => {
-              this.setState({
+                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);
+            const _photoclip = new PhotoClip("#headPicModal", options);
-            photoclip.load(imageFile.ossUrl);
+            _photoclip.load(imageFile.ossUrl);
-            console.log("photoclip-222", photoclip);
            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">
+              <div id="H5-preview-url-box">
-                <img src={this.state.dataUrl} alt="" />
+                <img src={this.state.dataUrl} style={{ width: '100%' }} alt="" />
              </div>
            </div>
          </div>