P5-3034 Image editor frame size wrong when on inches

examples/canvas/index.html

@@ -17,6 +17,11 @@
             <option value="black">Black</option>
             <option value="image">Image</option>
         </select>
+        <label>Unit:</label>
+        <select id="unit">
+            <option value="cm">Cm</option>
+            <option value="inch">Inches</option>
+        </select>
         <canvas id="image-editor" width="800" height="600"></canvas>
 
         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
@@ -25,6 +30,7 @@
         <script type="text/javascript">
             var width = document.getElementById('width');
             var height = document.getElementById('height');
+            var unit = document.getElementById('unit');
             var frame = document.getElementById('frame');
             var posX = document.getElementById('pos-x');
             var posY = document.getElementById('pos-y');
@@ -35,7 +41,7 @@
             });
 
             function cropImage() {
-                editor.crop(width.value, height.value);
+                editor.crop(width.value, height.value, unit.value);
             }
 
             function setFrame() {
@@ -57,10 +63,22 @@
                 }
             }
 
+            function setUnit() {
+                if (unit.value == 'inch') {
+                    width.value = Math.round(width.value / 2.54 * 100) / 100;
+                    height.value = Math.round(height.value / 2.54 * 100) / 100;
+                } else {
+                    width.value = Math.round(width.value * 2.54);
+                    height.value = Math.round(height.value * 2.54);
+                }
+                cropImage();
+            }
+
             //add event listeners
             width.addEventListener('keyup', cropImage);
             height.addEventListener('keyup', cropImage);
             frame.addEventListener('change', setFrame);
+            unit.addEventListener('change', setUnit);
             window.addEventListener('resize', resizeEditor);
             $(document).on('PIE:dragged', showCoordinates);