erp5_document_scanner: Extend code to apply filters in image with Caman

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, URL, File*/
+(function (rJS, RSVP, window, document, navigator, Cropper, Promise, JSON, jIO, promiseEventListener, domsugar, createImageBitmap, FormData, Caman, URL, File) {
   "use strict";
 
   //////////////////////////////////////////////////
@@ -50,7 +50,7 @@
     return new RSVP.Promise(waitForStream, canceller);
   }
 
-  function handleCropper(gadget, element, data, settings, callback) {
+  function handleCropper(element, data, callback) {
     var cropper,
       queue = new RSVP.Queue(),
       img =  domsugar("img"),
@@ -60,50 +60,6 @@
       cropper.destroy();
     }
 
-    if (settings.brightness || settings.contrast || settings.enable_greyscale || settings.compression) {
-      return new RSVP.Queue()
-        .push(function () {
-          return new Promise(function (resolve) {
-            Caman(canvas, element, function () {
-              if (settings.brightness !== 0) {
-                this.brightness(data.brightness);
-              }
-              if (settings.contrast !== 0) {
-                this.contrast(data.contrast);
-              }
-              if (settings.enable_greyscale) {
-                this.greyscale();
-              }
-              this.render(function () {
-                resolve(canvas.toDataURL("image/jpeg", settings.compression));
-              });
-            });
-          });
-        })
-        .push(function (data_str) {
-          img.setAttribute("src", data_str);
-
-          // creating Cropper is asynchronous
-          return new RSVP.Promise(function (resolve, reject) {
-            cropper = new Cropper(img, {
-              data: data,
-              ready: function () {
-                return new RSVP.Queue()
-                  .push(function () {
-                    return callback(cropper);
-                  })
-                  .push(undefined, function (error) {
-                    if (!(error instanceof RSVP.CancellationError)) {
-                      canceller();
-                      reject(error);
-                    }
-                  });
-              }
-            });
-          }, canceller);
-        });
-    }
-
     // creating Cropper is asynchronous
     return new RSVP.Promise(function (resolve, reject) {
       cropper = new Cropper(element, {
@@ -337,7 +293,10 @@
 
   // Capture the media stream
   function captureAndRenderPicture(gadget) {
-    var image_capture = new window.ImageCapture(
+    var file,
+       settings = gadget.state.preferred_image_settings_data,
+       data = gadget.state.preferred_cropped_canvas_data,
+       image_capture = new window.ImageCapture(
         gadget.element.querySelector('video').srcObject.getVideoTracks()[0]
       ),
       div;
@@ -351,6 +310,38 @@
       })
       .push(function (blob) {
         gadget.detached_promise_dict.media_stream.cancel('Not needed anymore, as captured');
+        if (settings.brightness || settings.contrast || settings.enable_greyscale || settings.compression) {
+          return new RSVP.Queue()
+            .push(function () {
+              return jIO.util.readBlobAsDataURL(blob);
+            })
+            .push(function (result) {
+              var canvas = domsugar('canvas', {'class': 'canvas'});
+              return new Promise(function (resolve) {
+                // XXX the correct usage is `new Caman()` but the library does not support it
+                Caman(canvas, result.target.result, function () {
+                  if (settings.brightness && settings.brightness !== 0) {
+                    this.brightness(settings.brightness);
+                  }
+                  if (settings.contrast && settings.contrast !== 0) {
+                    this.contrast(settings.contrast);
+                  }
+                  if (settings.enable_greyscale) {
+                    this.greyscale();
+                  }
+                  this.render(function () {
+                    canvas.toBlob(function (blob) {
+                      resolve(blob);
+                    });
+                  });
+                });
+              });
+            });
+        } else {
+          return blob;
+        }
+      })
+      .push(function (blob) {
         return RSVP.all([
           gadget.getTranslationList(["Delete", "Save"]),
           createImageBitmap(blob),
@@ -361,7 +352,6 @@
         var bitmap = result_list[1],
           canvas = domsugar('canvas', {'class': 'canvas'}),
           defer = RSVP.defer();
-
         // Prepare the cropper canvas
         canvas.width = bitmap.width;
         canvas.height = bitmap.height;
@@ -393,10 +383,8 @@
         gadget.element.replaceChild(div, gadget.element.firstElementChild);
 
         addDetachedPromise(gadget, 'cropper',
-                           handleCropper(gadget,
-                                         canvas,
+                           handleCropper(canvas,
                                          gadget.state.preferred_cropped_canvas_data,
-                                         gadget.state.preferred_image_settings_data,
                                          defer.resolve));
         return defer.promise;
       })
@@ -712,4 +700,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, URL, File));
\ 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>981.51308.5350.25326</string> </value>
+                      <value> <string>981.52410.59293.63010</string> </value>
                   </item>
                   <item>
                       <key> <string>state</string> </key>
@@ -262,7 +262,7 @@
                           </tuple>
                           <state>
                             <tuple>
-                              <float>1581468361.42</float>
+                              <float>1581534665.68</float>
                               <string>UTC</string>
                             </tuple>
                           </state>

[Gabriel Monnerat]

@romain I was not able to use URL.createObjectURL. It introduces more code than just use readBlobAsDataURL.

[Romain Courteaud]

return URL.createObjectURL(blob); is not much longer than return jIO.util.readBlobAsDataURL(blob);...

It seems I missed something. What is the issue?

[Gabriel Monnerat]

Not issue, but I need do something like this to get src properly

      img.src = URL.createObjectURL(blob);
      img.onload = function() {
        URL.revokeObjectURL(this.src);
      }

(of course, using promise)

In readBlobAsDataURL, we use FileReader that I don't think is bad or declared as deprecated.

But, if you are in flavour of URL.createObjectURL, please let me know.

[Romain Courteaud]

You should revoke the URL only when Caman usage is finished.

Otherwise, it will not be able to fetch the image content.

[Gabriel Monnerat]

@romain Caman does not work with new. Maybe the initializer is a function.

[Romain Courteaud]

If jslint is complaining, rename the global function parameter to caman.

[Gabriel Monnerat]

Thank you. jslint is happy now