erp5_document_scanner: restrict the minimum canvas size to fill fit the container

And add comments

bt5/erp5_document_scanner/PathTemplateItem/web_page_module/rjs_gadget_document_scanner_js.js

@@ -60,7 +60,13 @@
     // creating Cropper is asynchronous
     return new RSVP.Promise(function (resolve, reject) {
       cropper = new Cropper(element, {
+        // restrict the minimum canvas size to fill fit the container
         viewMode: 3,
+        // Avoid any cropper calculation or guessing
+        scalable: false,
+        rotatable: false,
+        zoomable: false,
+        movable: false,
         data: data,
         ready: function () {
           return new RSVP.Queue()
@@ -367,7 +373,10 @@
               domsugar('label', {'class': 'page-number', text: gadget.state.page})
             ])
           ]),
-          img,
+          // If you don't know what you are doing:
+          // DON'T remove img from a div img-container.
+          // DON'T replace img by canvas.
+          domsugar("div", {"class": "img-container"}, [img]),
           domsugar('div', {'class': 'edit-picture'}, [
             domsugar('button', {type: 'button',
                                 'class': 'reset-btn ui-btn-icon-left ui-icon-times',

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