erp5_document_scanner: use load-image library to bypass chrome canvas transformation issue

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_html.html

@@ -25,6 +25,7 @@
     <script type="text/javascript" src="domsugar.js"></script>
     <script type="text/javascript" src="caman.full.min.js"></script>
     <script type="text/javascript" src="glfx.js"></script>
+    <script type="text/javascript" src="load-image.all.min.js"></script>
     <script type="text/javascript" src="gadget_document_scanner.js"></script>
     <title>Gadget Document Scanner</title>
   </head>

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_html.xml

@@ -242,7 +242,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>982.61373.37397.17954</string> </value>
+                      <value> <string>983.7362.49324.10547</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -260,7 +260,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1585899899.78</float>
+                              <float>1599236057.62</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_js.js

 /*jslint indent: 2, unparam: true, bitwise: true */
 /*global rJS, RSVP, window, document, navigator, Cropper, Promise, JSON, jIO,
          promiseEventListener, domsugar, createImageBitmap, FormData, Caman,
-         FileReader, DataView, URL, fx*/
+         FileReader, DataView, URL, fx, loadImage */
 (function (rJS, RSVP, window, document, navigator, Cropper, Promise, JSON, jIO,
            promiseEventListener, domsugar, createImageBitmap, FormData, caman,
            FileReader, DataView, URL, fx) {
@@ -528,8 +528,7 @@
       .push(function (result) {
         orientation = result;
 
-        var expected_width = settings.maximum_width,
-          bitmap_options;
+        var expected_width = settings.maximum_width;
         // If orientation is correct, return the original blob
         // and size is small
         // and no color correction is expected
@@ -550,13 +549,19 @@
             var canvas,
               webgl_context,
               higher_dimension_key,
-              higher_dimension_value;
+              higher_dimension_value,
+              load_image_options = {
+                meta: false,
+                orientation: true,
+                canvas: true,
+                imageSmoothingQuality: 'high'
+              };
 
             if (bitmap.width < bitmap.height) {
-              higher_dimension_key = 'resizeHeight';
+              higher_dimension_key = 'maxHeight';
               higher_dimension_value = bitmap.height;
             } else {
-              higher_dimension_key = 'resizeWidth';
+              higher_dimension_key = 'maxWidth';
               higher_dimension_value = bitmap.width;
             }
 
@@ -569,64 +574,14 @@
             );
 
             if ((!!expected_width) && (expected_width < higher_dimension_value)) {
-              bitmap_options = {
-                resizeQuality: 'high'
-              };
-              bitmap_options[higher_dimension_key] = expected_width;
-              return createImageBitmap(blob, bitmap_options);
+              load_image_options[higher_dimension_key] = expected_width;
             }
 
-            return bitmap;
+            return loadImage(blob, load_image_options);
 
           })
-          .push(function (bitmap) {
-            var height = bitmap.height,
-              width = bitmap.width,
-              canvas = domsugar('canvas'),
-              ctx;
-
-            // Caman expect the canvas to be in a container
-            // in order to replace it when resizing
-            domsugar('div', [canvas]);
-
-            if ((4 < orientation) && (orientation < 9)) {
-              canvas.width = height;
-              canvas.height = width;
-            } else {
-              canvas.width = width;
-              canvas.height = height;
-            }
-
-            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);
-
+          .push(function (data) {
+            var canvas = data.image;
             if (settings.brightness || settings.contrast || settings.enable_greyscale) {
               return handleGfx(canvas, settings);
               // return handleCaman(canvas, settings);

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/scanner_gadget_document_scanner_js.xml

@@ -244,7 +244,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>983.14351.3372.41932</string> </value>
+                      <value> <string>986.29418.46329.12509</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1586942462.17</float>
+                              <float>1599470361.92</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/WebSection_getDocumentScannerPrecacheManifestList.py

@@ -7,7 +7,8 @@ url_list = [
   "cropper.css",
   "cropper.js",
   "caman.full.min.js",
-  "glfx.js"
+  "glfx.js",
+  "load-image.all.min.js"
 ]
 
 return url_list

bt5/erp5_document_scanner/SkinTemplateItem/portal_skins/erp5_document_scanner/load-image.all.min.js.xml

+<?xml version="1.0"?>
+<ZopeData>
+  <record id="1" aka="AAAAAAAAAAE=">
+    <pickle>
+      <global name="File" module="OFS.Image"/>
+    </pickle>
+    <pickle>
+      <dictionary>
+        <item>
+            <key> <string>_Cacheable__manager_id</string> </key>
+            <value> <string>must_revalidate_http_cache</string> </value>
+        </item>
+        <item>
+            <key> <string>__name__</string> </key>
+            <value> <string>load-image.all.min.js</string> </value>
+        </item>
+        <item>
+            <key> <string>content_type</string> </key>
+            <value> <string>text/javascript</string> </value>
+        </item>
+        <item>
+            <key> <string>precondition</string> </key>
+            <value> <string></string> </value>
+        </item>
+        <item>
+            <key> <string>title</string> </key>
+            <value> <string>load-image.all.min.js</string> </value>
+        </item>
+      </dictionary>
+    </pickle>
+  </record>
+</ZopeData>