Fix OCRed texts are not aligned correctly (#230)

webcatalog · Sep 9, 2020 · a9d233a · a9d233a
1 parent 085fe67
commit a9d233a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/src/components/pages/ocr/index.js b/src/components/pages/ocr/index.js
@@ -60,9 +60,6 @@ const styles = (theme) => ({
       outlineWidth: 5,
     },
   },
-  ocrImage: {
-    maxWidth: 1500,
-  },
   controllers: {
     bottom: theme.spacing(1),
     left: 0,
@@ -122,6 +119,8 @@ class Ocr extends React.Component {
     const {
       classes,
       imageUrl,
+      imageHeight,
+      imageWidth,
       inputLang,
       inputText,
       lines,
@@ -177,7 +176,14 @@ class Ocr extends React.Component {
                 {line.text}
               </div>
             ))}
-            <img src={imageUrl} className={classes.ocrImage} alt="" />
+            <img
+              src={imageUrl}
+              alt=""
+              style={{
+                height: imageHeight,
+                width: imageWidth,
+              }}
+            />
           </div>
         </div>
         <Paper className={classes.controllers}>
@@ -292,6 +298,8 @@ class Ocr extends React.Component {
 
 Ocr.defaultProps = {
   imageUrl: null,
+  imageHeight: 0,
+  imageWidth: 0,
   inputText: '',
   lines: [],
   mode: 'input',
@@ -302,6 +310,8 @@ Ocr.defaultProps = {
 Ocr.propTypes = {
   classes: PropTypes.object.isRequired,
   imageUrl: PropTypes.string,
+  imageHeight: PropTypes.number,
+  imageWidth: PropTypes.number,
   inputLang: PropTypes.string.isRequired,
   inputText: PropTypes.string,
   lines: PropTypes.array,
@@ -318,6 +328,8 @@ Ocr.propTypes = {
 
 const mapStateToProps = (state) => ({
   imageUrl: state.pages.ocr ? state.pages.ocr.imageUrl : undefined,
+  imageHeight: state.pages.ocr ? state.pages.ocr.imageHeight : undefined,
+  imageWidth: state.pages.ocr ? state.pages.ocr.imageWidth : undefined,
   inputLang: state.preferences.inputLang,
   inputText: state.pages.ocr ? state.pages.ocr.inputText : undefined,
   lines: state.pages.ocr ? state.pages.ocr[`${state.pages.ocr.mode || 'output'}Lines`] : undefined,

diff --git a/src/state/pages/ocr/actions.js b/src/state/pages/ocr/actions.js
@@ -54,8 +54,8 @@ export const loadImage = (type = 'file') => (dispatch, getState) => {
                   fileName: 'compressed.jpg',
                 },
                 original: result,
-                maxWidth,
-                maxHeight,
+                imageWidth: maxWidth,
+                imageHeight: maxHeight,
               });
             }, 'image/jpeg', 50);
           };
@@ -69,7 +69,9 @@ export const loadImage = (type = 'file') => (dispatch, getState) => {
     .then((result) => {
       if (!result) return;
 
-      const { compressed, original, maxWidth } = result;
+      const {
+        compressed, original, maxWidth, imageHeight, imageWidth,
+      } = result;
       const { blob, fileName } = compressed;
 
       const formData = new FormData();
@@ -139,6 +141,8 @@ export const loadImage = (type = 'file') => (dispatch, getState) => {
                   outputText,
                   outputLines,
                   zoomLevel,
+                  imageWidth,
+                  imageHeight,
                 },
               });