erp5_document_scanner: Optimize to reuse canvas

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/rjs_gadget_document_scanner_css.css

@@ -101,3 +101,13 @@ div[data-gadget-url$="gadget_document_scanner.html"] .new-btn {
   border: 1px solid rgba(0, 0, 0, 0.14);
   border-radius: 0.325em;
 }
+
+div[data-gadget-url$="gadget_document_scanner.html"] .img-container {
+  /* Never limit the container height here */
+  max-width: 100%;
+}
+
+div[data-gadget-url$="gadget_document_scanner.html"] .img-container img {
+  /* This is important */
+  width: 100%;
+}
\ No newline at end of file

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/rjs_gadget_document_scanner_css.xml

@@ -244,7 +244,7 @@
                   </item>
                   <item>
                       <key> <string>serial</string> </key>
-                      <value> <string>981.57889.14448.17681</string> </value>
+                      <value> <string>981.59690.60488.51404</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1581863137.03</float>
+                              <float>1581971251.8</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/rjs_gadget_document_scanner_js.js

@@ -309,31 +309,21 @@
         return image_capture.takePhoto({imageWidth: capabilities.imageWidth.max});
       })
       .push(function (blob) {
-        return RSVP.all([
-          createImageBitmap(blob),
-          jIO.util.readBlobAsDataURL(blob)
-        ]);
+        return createImageBitmap(blob);
       })
-      .push(function (result_list) {
-        var bitmap = result_list[0],
-          canvas = domsugar('canvas', {'class': 'canvas'});
+      .push(function (bitmap) {
+        var canvas = domsugar('canvas', {'class': 'canvas'});
+        gadget.detached_promise_dict.media_stream.cancel('Not needed anymore, as captured');
+
         canvas.width = bitmap.width;
         canvas.height = bitmap.height;
         canvas.getContext('2d').drawImage(bitmap, 0, 0);
-        return [canvas, result_list[1].target.result];
-      })
-      .push(function (result_list) {
-        var new_canvas,
-            canvas = result_list[0],
-            data_url = result_list[1];
-        gadget.detached_promise_dict.media_stream.cancel('Not needed anymore, as captured');
         if (settings.brightness || settings.contrast || settings.enable_greyscale || settings.compression) {
-          new_canvas = domsugar('canvas', {'class': 'canvas'});
           return new RSVP.Queue()
             .push(function (result) {
               return new Promise(function (resolve) {
                 // XXX the correct usage is `new Caman()` but the library does not support it
-                caman(new_canvas, data_url, function () {
+                caman(canvas, null, function () {
                   if (settings.brightness && settings.brightness !== 0) {
                     this.brightness(settings.brightness);
                   }
@@ -344,19 +334,22 @@
                     this.greyscale();
                   }
                   this.render(function () {
-                    resolve(new_canvas);
+                    resolve([this.context.canvas, settings.compression]);
                   });
                 });
               });
             });
         }
-        return canvas;
+        return [canvas, settings.compression];
       })
-      .push(function (canvas) {
+      .push(function (result_list) {
+        var canvas = result_list[0],
+          compression = settings.compression || 1;
+
         return RSVP.all([
           gadget.getTranslationList(["Delete", "Save"]),
           new Promise(function (resolve) {
-            resolve(canvas.toDataURL("image/jpeg"));
+            resolve(canvas.toDataURL("image/jpeg", compression));
           }),
           buildPreviousThumbnailDom(gadget)
         ]);

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>981.59284.53554.54237</string> </value>
+                      <value> <string>981.59682.21065.57446</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1581947027.23</float>
+                              <float>1581970976.98</float>
                               <string>UTC</string>
                             </tuple>
                           </state>