erp5_document_scanner: Extend code to try fix orientation

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/rjs_gadget_document_scanner_js.js

 /*jslint indent: 2, unparam: true */
-/*global rJS, RSVP, window, document, navigator, Cropper, Promise, JSON, jIO, promiseEventListener, domsugar, createImageBitmap, FormData, Caman*/
-(function (rJS, RSVP, window, document, navigator, Cropper, Promise, JSON, jIO, promiseEventListener, domsugar, createImageBitmap, FormData, caman) {
+/*global rJS, RSVP, window, document, navigator, Cropper, Promise, JSON, jIO, promiseEventListener, domsugar, createImageBitmap, FormData, Caman, FileReader, DataView*/
+(function (rJS, RSVP, window, document, navigator, Cropper, Promise, JSON, jIO, promiseEventListener, domsugar, createImageBitmap, FormData, caman, FileReader, DataView) {
   "use strict";
 
   //////////////////////////////////////////////////
@@ -17,6 +17,58 @@
     });
   }
 
+  function getOrientation(blob, callback) {
+    var fr = new FileReader();
+    return new RSVP.Promise(function waitFormDataURLRead(resolve, reject) {
+      fr.addEventListener("load", function handleDataURLRead(evt) {
+        var view = new DataView(evt.target.result),
+          length = view.byteLength,
+          offset = 2,
+          marker,
+          little,
+          tags,
+          i;
+
+        if (view.getUint16(0, false) !== 0xFFD8) {
+          return resolve(-2);
+        }
+        while (offset < length) {
+          if (view.getUint16(offset + 2, false) <= 8) {
+            return resolve(-1);
+          }
+          marker = view.getUint16(offset, false);
+          offset += 2;
+          if (marker === 0xFFE1) {
+            offset += 2;
+            if (view.getUint32(offset, false) !== 0x45786966) {
+              return resolve(-1);
+            }
+            offset += 6;
+            little = view.getUint16(offset, false) === 0x4949;
+            offset += view.getUint32(offset + 4, little);
+            tags = view.getUint16(offset, little);
+            offset += 2;
+            for (i = 0; i < tags; i = i + 1) {
+              if (view.getUint16(offset + (i * 12), little) === 0x0112) {
+                return resolve(view.getUint16(offset + (i * 12) + 8, little));
+              }
+            }
+            continue;
+          } else if ((marker & 0xFF00) !== 0xFF00) {
+            break;
+          }
+          offset += view.getUint16(offset, false);
+        }
+        return resolve(-1);
+      });
+
+      fr.addEventListener("error", reject);
+      fr.readAsArrayBuffer(blob);
+    }, function cancelReadBlobAsDataURL() {
+      fr.abort();
+    });
+  }
+
   function handleUserMedia(device_id, callback) {
     // Do not modify this function!
     // There is no need to add the gadget logic inside
@@ -105,8 +157,9 @@
         scalable: false,
         // By default rotatable is true, if you remove it.
         // Make sure, it is set on data.
-        rotatable: false,
+        rotatable: true,
         zoomable: false,
+        checkOrientation: true,
         movable: false,
         data: data,
         ready: function () {
@@ -349,6 +402,7 @@
       image_capture = new window.ImageCapture(
         gadget.element.querySelector('video').srcObject.getVideoTracks()[0]
       ),
+      photo_blob,
       div;
 
     return new RSVP.Queue()
@@ -361,22 +415,64 @@
         return image_capture.takePhoto({imageWidth: capabilities.imageWidth.max});
       })
       .push(function (blob) {
+        photo_blob = blob;
+        return jIO.util.readBlobAsDataURL(blob);
+      })
+      .push(function (result) {
+        var img = domsugar("img", {"src": result.target.result});
+        gadget.detached_promise_dict.media_stream.cancel('Not needed anymore, as captured');
+        div = gadget.element.querySelector(".camera-input");
+        div.replaceChild(img, div.firstElementChild);
         return RSVP.all([
-          createImageBitmap(blob),
-          jIO.util.readBlobAsDataURL(blob)
+          createImageBitmap(photo_blob),
+          getOrientation(photo_blob)
         ]);
       })
       .push(function (result_list) {
         var bitmap = result_list[0],
-          img = domsugar("img", {"src": result_list[1].target.result}),
-          canvas = domsugar('canvas', {'class': 'canvas'});
+          orientation = result_list[1],
+          height = bitmap.height,
+          width = bitmap.width,
+          canvas = domsugar('canvas', {'class': 'canvas'}),
+          ctx;
+
+        if (4 < orientation && orientation < 9) {
+          canvas.width = height;
+          canvas.height = width;
+        } else {
+          canvas.width = width;
+          canvas.height = height;
+        }
 
-        div = gadget.element.querySelector(".camera-input");
-        gadget.detached_promise_dict.media_stream.cancel('Not needed anymore, as captured');
-        div.replaceChild(img, div.firstElementChild);
-        canvas.width = bitmap.width;
-        canvas.height = bitmap.height;
-        canvas.getContext('2d').drawImage(bitmap, 0, 0);
+        ctx = canvas.getContext('2d');
+
+        // transform context before drawing image
+        switch (orientation) {
+        case 2:
+          ctx.transform(-1, 0, 0, 1, width, 0);
+          break;
+        case 3:
+          ctx.transform(-1, 0, 0, -1, width, height);
+          break;
+        case 4:
+          ctx.transform(1, 0, 0, -1, 0, height);
+          break;
+        case 5:
+          ctx.transform(0, 1, 1, 0, 0, 0);
+          break;
+        case 6:
+          ctx.transform(0, 1, -1, 0, height, 0);
+          break;
+        case 7:
+          ctx.transform(0, -1, -1, 0, height, width);
+          break;
+        case 8:
+          ctx.transform(0, -1, 1, 0, 0, width);
+          break;
+        default:
+          break;
+        }
+        ctx.drawImage(bitmap, 0, 0);
         if (settings.brightness || settings.contrast || settings.enable_greyscale || settings.compression) {
           return handleCaman(canvas, settings);
         }
@@ -391,7 +487,10 @@
           new Promise(function (resolve) {
             resolve(canvas.toDataURL("image/jpeg", compression));
           }),
-          buildPreviousThumbnailDom(gadget)
+          buildPreviousThumbnailDom(gadget),
+          new Promise(function (resolve) {
+            canvas.toBlob(resolve, "image/jpeg", compression);
+          })
         ]);
       })
       .push(function (result_list) {
@@ -783,4 +882,4 @@
 
     .declareAcquiredMethod("getTranslationList", "getTranslationList");
 
-}(rJS, RSVP, window, document, navigator, Cropper, Promise, JSON, jIO, promiseEventListener, domsugar, createImageBitmap, FormData, Caman));
+}(rJS, RSVP, window, document, navigator, Cropper, Promise, JSON, jIO, promiseEventListener, domsugar, createImageBitmap, FormData, Caman, FileReader, DataView));
\ No newline at end of file

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/rjs_gadget_document_scanner_js.xml

@@ -244,7 +244,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>982.7372.6060.34525</string> </value>
+                      <value> <string>982.7505.28245.6314</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1582764289.53</float>
+                              <float>1582772276.5</float>
                               <string>UTC</string>
                             </tuple>
                           </state>