fix ios img orientation

package-lock.json

@@ -3939,6 +3939,11 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "data-uri-to-u8": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/data-uri-to-u8/-/data-uri-to-u8-1.0.0.tgz",
+      "integrity": "sha1-Ilp58t07NQrY1iiem5yR2DX7jb4="
+    },
     "data-urls": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-1.1.0.tgz",
@@ -4990,6 +4995,11 @@
         "strip-eof": "^1.0.0"
       }
     },
+    "exif-js": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/exif-js/-/exif-js-2.3.0.tgz",
+      "integrity": "sha1-nRCBm/Vx+HOBPnZAJBJVq5zhqBQ="
+    },
     "exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -5386,6 +5396,18 @@
         "locate-path": "^3.0.0"
       }
     },
+    "fix-orientation": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fix-orientation/-/fix-orientation-1.1.0.tgz",
+      "integrity": "sha512-7APDplLhr9p7W1LX+TKlKPLpTJR+rDPqsVqDXOBq63VjdlSL6Wba2y6T2zUHIIJXbMs3h3FzTOGg346Vt3jTsw==",
+      "requires": {
+        "data-uri-to-u8": "~1.0.0",
+        "exif-js": "^2.3.0",
+        "jpeg-size": "0.0.1",
+        "png-size": "~0.1.0",
+        "rotate-component": "~1.0.0"
+      }
+    },
     "flat-cache": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-2.0.1.tgz",
@@ -7618,6 +7640,11 @@
         }
       }
     },
+    "jpeg-size": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/jpeg-size/-/jpeg-size-0.0.1.tgz",
+      "integrity": "sha1-fWCrfR5erQz/OKrlgFt9EsO16OA="
+    },
     "js-levenshtein": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/js-levenshtein/-/js-levenshtein-1.1.6.tgz",
@@ -9139,6 +9166,11 @@
       "resolved": "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz",
       "integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA=="
     },
+    "png-size": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/png-size/-/png-size-0.1.0.tgz",
+      "integrity": "sha1-1fTC2a2qMA9lL1vKk40otBR1Pcw="
+    },
     "pnp-webpack-plugin": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/pnp-webpack-plugin/-/pnp-webpack-plugin-1.5.0.tgz",
@@ -10906,6 +10938,11 @@
         "inherits": "^2.0.1"
       }
     },
+    "rotate-component": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rotate-component/-/rotate-component-1.0.0.tgz",
+      "integrity": "sha1-E5VQu7Au1Hk9MESfyUv/8KlWY10="
+    },
     "rsvp": {
       "version": "4.8.5",
       "resolved": "https://registry.npmjs.org/rsvp/-/rsvp-4.8.5.tgz",

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "copy-to-clipboard": "^3.0.8",
+    "fix-orientation": "^1.1.0",
     "load-script": "^1.0.0",
     "pressure": "^2.1.2",
     "react": "^16.9.0",

src/UserAction.css

@@ -35,11 +35,11 @@
 }
 .post-form-bar input[type=file] {
     border: 0;
-    padding: 0 .5em;
+    padding: 0 0 0 .5em;
 }
 @media screen and (max-width: 580px) {
     .post-form-bar input[type=file] {
-        width: 110px;
+        width: 120px;
     }
 }
 .post-form-bar button {

src/UserAction.js

@@ -1,17 +1,18 @@
 import React, {Component, PureComponent} from 'react';
-import copy from 'copy-to-clipboard';
 import {API_BASE, SafeTextarea, PromotionBar} from './Common';
 import {MessageViewer} from './Message';
+import {LoginPopup} from './infrastructure/widgets';
+import {ConfigUI} from './Config';
+import fixOrientation from 'fix-orientation';
+import copy from 'copy-to-clipboard';
+import {cache} from './cache';
 import {API_VERSION_PARAM, PKUHELPER_ROOT, API, get_json, token_param} from './flows_api';
 
 import './UserAction.css';
-import {LoginPopup} from './infrastructure/widgets';
-import {ConfigUI} from './Config';
-import {cache} from './cache';
 
 const BASE64_RATE=4/3;
 const MAX_IMG_DIAM=8000;
-const MAX_IMG_PX=6000000;
+const MAX_IMG_PX=5000000;
 const MAX_IMG_FILESIZE=450000*BASE64_RATE;
 
 export const TokenCtx=React.createContext({
@@ -543,11 +544,8 @@ export class PostForm extends Component {
             }
 
             let reader=new FileReader();
-            reader.onload=((event)=>{ // check size
-                const url=event.target.result;
+            function on_got_img(url) {
                 const image = new Image();
-                image.src=url;
-
                 image.onload=(()=>{
                     let width=image.width;
                     let height=image.height;
@@ -600,7 +598,13 @@ export class PostForm extends Component {
                         reject('图片过大，无法上传');
                     }
                 });
+                image.src=url;
+            }
+            reader.onload=(event)=>{
+                fixOrientation(event.target.result,{},(fixed_dataurl)=>{
+                    on_got_img(fixed_dataurl);
                 });
+            };
             reader.readAsDataURL(file);
         });
     }