[ticket/15769] Make xo happy and try to use cropped image canvas

PHPBB3-15769

phpBB/assets/javascript/phpbb-avatars.js

@@ -1,13 +1,13 @@
+/* global phpbb */
 (function($) { // Avoid conflicts with other libraries
+	'use strict';
 
-'use strict';
+	/**
-
-/**
 	 * phpBB Avatars namespace.
 	 *
 	 * Handles cropping for local file uploads.
 	 */
-phpbb.avatars = {
+	phpbb.avatars = {
 		cropper: null,
 		image: null,
 
@@ -32,7 +32,7 @@ phpbb.avatars = {
 		/**
 		 * Initialise avatar cropping.
 		 */
-	init: function() {
+		init() {
 			// If the cropper library is not available
 			if (!$.isFunction($.fn.cropper)) {
 				return;
@@ -50,7 +50,7 @@ phpbb.avatars = {
 		/**
 		 * Destroy (undo) any initialisation.
 		 */
-	destroy: function() {
+		destroy() {
 			this.$buttons.find('[data-cropper-action]').off('click.phpbb.avatars');
 			this.image.off('crop.phpbb.avatars');
 
@@ -68,7 +68,7 @@ phpbb.avatars = {
 		 * If a different driver than the "upload" driver is selected, the cropper is destroyed.
 		 * Otherwise if the "upload" driver is (re-)selected, and it has a value, initialise it.
 		 */
-	bindSelect: function() {
+		bindSelect() {
 			this.$driver.on('change', function() {
 				if ($(this).val() === phpbb.avatars.driverUpload) {
 					if (phpbb.avatars.$input.val() !== '') {
@@ -86,18 +86,18 @@ phpbb.avatars = {
 		 * If a file was chosen and it is a valid image file, the cropper is initialised.
 		 * Otherwise the cropper is destroyed.
 		 */
-	bindInput: function() {
+		bindInput() {
 			this.$input.on('change', function() {
 				const fileReader = new FileReader();
 
 				if (this.files[0].type.match('image.*')) {
 					fileReader.readAsDataURL(this.files[0]);
 
-				fileReader.onload = function() {
+					fileReader.addEventListener('load', function() {
 						phpbb.avatars.image.cropper('destroy').attr('src', this.result).addClass('avatar');
 						phpbb.avatars.initCropper();
 						phpbb.avatars.initButtons();
-				};
+					});
 				} else {
 					phpbb.avatars.destroy();
 				}
@@ -112,7 +112,7 @@ phpbb.avatars = {
 		 * It also takes two optional parameters, imploded by a comma.
 		 * For example: data-cropper-action="move,0,10" which results in $().cropper('move', 0, 10)
 		 */
-	initButtons: function() {
+		initButtons() {
 			this.$buttons.show().find('[data-cropper-action]').off('click.phpbb.avatars').on('click.phpbb.avatars', function() {
 				const option = $(this).data('cropper-action').split(',');
 				const action = option[0];
@@ -120,7 +120,7 @@ phpbb.avatars = {
 				if (typeof phpbb.avatars.cropper[action] === 'function') {
 					// Special case: flip, set it to the opposite value (-1 and 1).
 					if (action === 'scaleX' || action === 'scaleY') {
-					phpbb.avatars.image.cropper(action, - phpbb.avatars.cropper.getData(true)[action]);
+						phpbb.avatars.image.cropper(action, -phpbb.avatars.cropper.getData(true)[action]);
 					} else {
 						phpbb.avatars.image.cropper(action, option[1], option[2]);
 					}
@@ -137,10 +137,10 @@ phpbb.avatars = {
 		 * automatically creates the maximum available and allowed cropping area,
 		 * and registers a callback function for the 'crop' event.
 		 */
-	initCropper: function() {
+		initCropper() {
 			this.cropper = this.image.cropper({
 				aspectRatio: 1,
-			autoCropArea: 1
+				autoCropArea: 1,
 			}).data('cropper');
 
 			this.image.off('crop.phpbb.avatars').on('crop.phpbb.avatars', phpbb.avatars.onCrop);
@@ -159,26 +159,31 @@ phpbb.avatars = {
 		 *
 		 * @param {object} event
 		 */
-	onCrop: function(event) {
+		onCrop(event) {
 			const data = phpbb.avatars.$data.data();
-		const width = event.detail.width;
+			let width = event.detail.width;
-		const height = event.detail.height;
+			let height = event.detail.height;
 
-		if (width < data.minWidth || width > data.maxWidth ||
+			if (width < data.minWidth || height < data.minHeight) {
-			height < data.minHeight || height > data.maxHeight
+				width = Math.max(data.minWidth, Math.min(data.maxWidth, width));
-		) {
+				height = Math.max(data.minHeight, Math.min(data.maxHeight, height));
 				phpbb.avatars.cropper.setData({
-				width: Math.max(data.minWidth, Math.min(data.maxWidth, width)),
+					width,
-				height: Math.max(data.minHeight, Math.min(data.maxHeight, height)),
+					height,
 				});
 			}
 
-		phpbb.avatars.$data.val(JSON.stringify(phpbb.avatars.cropper.getData(true)));
+			phpbb.avatars.$data.val(JSON.stringify(phpbb.avatars.cropper.getCroppedCanvas({
+				minWidth: data.minWidth,
+				minHeight: data.minHeight,
+				maxWidth: data.maxWidth,
+				maxHeight: data.maxHeight,
+				imageSmoothingEnabled: false, // smoothing will just look blurry
+			})));
 		},
-};
+	};
 
-$(function() {
+	$(() => {
 		phpbb.avatars.init();
-});
+	});
-
 })(jQuery); // Avoid conflicts with other libraries