[FIX] web_editor: fix black line problem for odd width images

When adding an odd width images on website, a thin black line is
drawn on its right side. The problem comes from the getSourceCanvas
of the cropperjs library. A translation is applied followed by an other
translation in the opposite direction. However the second translation
was not the exact reverse of the first due to a rounding problem.

The fix proposed here comes from: https://github.com/fengyuanchen/cropperjs/pull/300/commits/a6481c052cfc93ef14dd95a3bd00142215dda36e

task-2652904

closes odoo/odoo#77562

X-original-commit: 53f13979cc363c74a8f4e2cec0d24ca10c6ac11c
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/web_editor/static/lib/cropperjs/cropper.js

@@ -945,9 +945,19 @@
     context.scale(scaleX, scaleY);
     context.imageSmoothingEnabled = imageSmoothingEnabled;
     context.imageSmoothingQuality = imageSmoothingQuality;
-    context.drawImage.apply(context, [image].concat(_toConsumableArray(params.map(function (param) {
-      return Math.floor(normalizeDecimalNumber(param));
-    }))));
+    /**
+     * ODOO FIX START
+     *
+     * Canevas is translated and then translated back. For the second translation the
+     * translation distances were rounded to the nearest integer below when it should
+     * not since the distances of the first translation are either an integer or the
+     * half of an integer.
+     *
+     * Fix proposed by https://github.com/fengyuanchen/cropperjs/pull/866
+     */
+    params = params.map(normalizeDecimalNumber);
+    context.drawImage(image, params[0], params[1], Math.floor(params[2]), Math.floor(params[3]));
+    // ODOO FIX END
     context.restore();
     return canvas;
   }