#796 [JS] fix: use aspect ratio 16/9 for calculate canvas size

Author: nicolas-eoxia

js/modules/media.js

@@ -316,13 +316,25 @@ window.saturne.media.drawImageOnCanvas = function(event) {
     img.src                  = event.target.result;
     window.saturne.media.img = event;
     img.onload = function() {
-      if (img.width >= $('.fast-upload-options').data('image-resolution-width')) {
-        window.saturne.media.canvas.width  = $('.fast-upload-options').data('image-resolution-width');
-        window.saturne.media.canvas.height = $('.fast-upload-options').data('image-resolution-height');
+      const maxWidth    = $('.fast-upload-options').data('image-resolution-width');
+      const maxHeight   = $('.fast-upload-options').data('image-resolution-height');
+      const aspectRatio = 16 / 9;
+
+      let canvasWidth, canvasHeight;
+
+      if (img.width / img.height > aspectRatio) {
+        // Image is wider than 16:9
+        canvasWidth  = Math.min(img.width, maxWidth);
+        canvasHeight = canvasWidth / aspectRatio;
       } else {
-        window.saturne.media.canvas.width  = img.width;
-        window.saturne.media.canvas.height = img.height;
+        // Image is taller than 16:9
+        canvasHeight = Math.min(img.height, maxHeight);
+        canvasWidth  = canvasHeight * aspectRatio;
       }
+
+      window.saturne.media.canvas.width  = canvasWidth;
+      window.saturne.media.canvas.height = canvasHeight;
+
       context.drawImage(img, 0, 0, window.saturne.media.canvas.width, window.saturne.media.canvas.height);
 
       // Restore drawing state