上传图片后剪裁大小

src/components/Input/ImagePicker/ImagePicker.js

@@ -2,11 +2,24 @@ import React, { Component } from 'react';
 import styles from './style.css';
 import addimgIcon from './images/add_pic_bg@2x.png';
 import delIcon from './images/delete_pic_btn@2x.png';
-
+import { Toast } from 'antd-mobile';
 class ImagePicker extends Component {
   constructor(props) {
     super(props);
+
+    let canDom = document.getElementById('ksCanvasBox');
+    if (!canDom) {
+      canDom = document.createElement('canvas');
+      canDom.id = 'ksCanvasBox';
+      canDom.setAttribute('width', '590px');
+      canDom.setAttribute('height', '334px');
+      canDom.style = 'display: none';
+      document.body.appendChild(canDom);
+    }
+    this.canvas = canDom;
+
     this.state = {
+      aspectRatio: 590 / 334,
       done: false,
       hasValue:
         Object.keys(props).find(i => i === 'value') === -1 ? false : true,
@@ -15,7 +28,8 @@ class ImagePicker extends Component {
   }
   shouldComponentUpdate(nextProps, nextState) {
     const { value } = nextProps;
-    const { files } = nextState;
+    const { files, done } = nextState;
+    console.log(value, files);
     if (!value && files.length) {
       this.deleteImage();
     }
@@ -46,17 +60,23 @@ class ImagePicker extends Component {
   uploadImg = e => {
     const { onChange } = this.props;
     const filesList = e.target.files;
-    const fileUrl = this.createObjectURL(filesList[0]);
+    // const fileUrl = this.createObjectURL(filesList[0]);
+    this.resizeImg(filesList[0])
+      .then(({ file, url }) => {
         this.setState(() => ({
-      files: [fileUrl],
+          files: [url],
           done: true,
         }));
         if (onChange) {
           onChange({
-        filesList,
-        url: fileUrl,
+            filesList: [file],
+            url: url,
           });
         }
+      })
+      .catch(err => {
+        Toast.fail(err);
+      });
   };
   createObjectURL = blob => {
     if (window.URL) {
@@ -73,6 +93,35 @@ class ImagePicker extends Component {
       return window.webkitURL.revokeObjectURL(url);
     }
   };
+  resizeImg = file =>
+    new Promise((resolve, reject) => {
+      const { aspectRatio } = this.state;
+      const ctx = this.canvas.getContext('2d');
+      const fileUrl = this.createObjectURL(file);
+      const img = new Image();
+      img.onload = () => {
+        console.log(img.width, img.height);
+        let imgRatio = img.width / img.height;
+        let x, y;
+        if (imgRatio > aspectRatio) {
+          x = 590;
+          y = 590 / imgRatio;
+        } else {
+          x = 334 * imgRatio;
+          y = 334;
+        }
+        ctx.drawImage(img, (590 - x) / 2, (334 - y) / 2, x, y);
+        this.canvas.toBlob(blob => {
+          const dataURL = this.canvas.toDataURL('image/png');
+          console.log(file.size, dataURL.length);
+          resolve({ file: blob, url: dataURL });
+        });
+      };
+      img.onerror = () => {
+        reject('背景加载失败');
+      };
+      img.src = fileUrl;
+    });
   render() {
     const { className } = this.props;
     const { files, done } = this.state;

src/containers/Repair/components/RepairItem.js

@@ -82,7 +82,7 @@ class RepairItem extends Component {
                   <div className={styles.listLine2ItemRight}>
                     <div className={styles.listLabel}>报修人tel：</div>
                     <div className={styles.listValue}>
-                      {data.applyCellphone}
+                      {data.repairCellphone}
                     </div>
                   </div>
                 </div>,
@@ -112,7 +112,7 @@ class RepairItem extends Component {
                   <div className={styles.listLine2ItemRight}>
                     <div className={styles.listLabel}>报修人tel：</div>
                     <div className={styles.listValue}>
-                      {data.applyCellphone}
+                      {data.repairCellphone}
                     </div>
                   </div>
                 </div>,