From 4c8637af77263d100f26602fae3ff82d069934fe Mon Sep 17 00:00:00 2001 From: xmcp Date: Mon, 10 Feb 2020 13:44:00 +0800 Subject: [PATCH] fix ios img orientation --- package-lock.json | 37 +++++++++++++++++++++++++++++++++++++ package.json | 1 + src/UserAction.css | 4 ++-- src/UserAction.js | 24 ++++++++++++++---------- 4 files changed, 54 insertions(+), 12 deletions(-) diff --git a/package-lock.json b/package-lock.json index fea1fff..ad61336 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index e7184f9..2f52912 100644 --- a/package.json +++ b/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", diff --git a/src/UserAction.css b/src/UserAction.css index 4098729..6452be3 100644 --- a/src/UserAction.css +++ b/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 { diff --git a/src/UserAction.js b/src/UserAction.js index ce576f8..7b311fa 100644 --- a/src/UserAction.js +++ b/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 {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 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'; 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); }); }