[ticket/15769] Crop avatars on upload

PHPBB3-15769

phpBB/assets/javascript/jquery-cropper.js

@@ -0,0 +1,73 @@
+/*!
+ * jQuery Cropper v1.0.1
+ * https://fengyuanchen.github.io/jquery-cropper
+ *
+ * Copyright 2018-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2019-10-19T08:48:33.062Z
+ */
+
+(function (global, factory) {
+	typeof exports === 'object' && typeof module !== 'undefined' ? factory(require('jquery'), require('cropperjs')) :
+		typeof define === 'function' && define.amd ? define(['jquery', 'cropperjs'], factory) :
+			(global = global || self, factory(global.jQuery, global.Cropper));
+}(this, function ($, Cropper) { 'use strict';
+
+	$ = $ && $.hasOwnProperty('default') ? $['default'] : $;
+	Cropper = Cropper && Cropper.hasOwnProperty('default') ? Cropper['default'] : Cropper;
+
+	if ($ && $.fn && Cropper) {
+		var AnotherCropper = $.fn.cropper;
+		var NAMESPACE = 'cropper';
+
+		$.fn.cropper = function jQueryCropper(option) {
+			for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+				args[_key - 1] = arguments[_key];
+			}
+
+			var result;
+			this.each(function (i, element) {
+				var $element = $(element);
+				var isDestroy = option === 'destroy';
+				var cropper = $element.data(NAMESPACE);
+
+				if (!cropper) {
+					if (isDestroy) {
+						return;
+					}
+
+					var options = $.extend({}, $element.data(), $.isPlainObject(option) && option);
+					cropper = new Cropper(element, options);
+					$element.data(NAMESPACE, cropper);
+				}
+
+				if (typeof option === 'string') {
+					var fn = cropper[option];
+
+					if ($.isFunction(fn)) {
+						result = fn.apply(cropper, args);
+
+						if (result === cropper) {
+							result = undefined;
+						}
+
+						if (isDestroy) {
+							$element.removeData(NAMESPACE);
+						}
+					}
+				}
+			});
+			return result !== undefined ? result : this;
+		};
+
+		$.fn.cropper.Constructor = Cropper;
+		$.fn.cropper.setDefaults = Cropper.setDefaults;
+
+		$.fn.cropper.noConflict = function noConflict() {
+			$.fn.cropper = AnotherCropper;
+			return this;
+		};
+	}
+
+}));

phpBB/assets/javascript/jquery-cropper.min.js

@@ -0,0 +1,10 @@
+/*!
+ * jQuery Cropper v1.0.1
+ * https://fengyuanchen.github.io/jquery-cropper
+ *
+ * Copyright 2018-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2019-10-19T08:48:33.062Z
+ */
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(require("jquery"),require("cropperjs")):"function"==typeof define&&define.amd?define(["jquery","cropperjs"],r):r((e=e||self).jQuery,e.Cropper)}(this,function(c,s){"use strict";if(c=c&&c.hasOwnProperty("default")?c.default:c,s=s&&s.hasOwnProperty("default")?s.default:s,c&&c.fn&&s){var e=c.fn.cropper,d="cropper";c.fn.cropper=function(p){for(var e=arguments.length,a=new Array(1<e?e-1:0),r=1;r<e;r++)a[r-1]=arguments[r];var u;return this.each(function(e,r){var t=c(r),n="destroy"===p,o=t.data(d);if(!o){if(n)return;var f=c.extend({},t.data(),c.isPlainObject(p)&&p);o=new s(r,f),t.data(d,o)}if("string"==typeof p){var i=o[p];c.isFunction(i)&&((u=i.apply(o,a))===o&&(u=void 0),n&&t.removeData(d))}}),void 0!==u?u:this},c.fn.cropper.Constructor=s,c.fn.cropper.setDefaults=s.setDefaults,c.fn.cropper.noConflict=function(){return c.fn.cropper=e,this}}});

phpBB/assets/javascript/phpbb-avatars.js

@@ -0,0 +1,174 @@
+(function($) {  // Avoid conflicts with other libraries
+
+'use strict';
+
+/**
+ * phpBB Avatars namespace.
+ *
+ * Handles cropping for local file uploads.
+ */
+phpbb.avatars = {
+	cropper: null,
+	image: null,
+
+	buttons: $('#avatar-cropper-buttons'),
+	box: $('#avatar-box'),
+	data: $('#avatar-cropper-data'),
+	input: $('#avatar_upload_file'),
+	driver: $('#avatar_driver'),
+	driverUpload: 'avatar_driver_upload',
+
+	/**
+	 * Initialise avatar cropping.
+	 */
+	init: function() {
+		// If the cropper library is not available
+		if (!$.isFunction($.fn.cropper)) {
+			return;
+		}
+
+		// Correctly position the cropper buttons
+		this.buttons.appendTo(this.box);
+
+		this.image = this.box.children('img');
+
+		this.bindInput();
+		this.bindSelect();
+	},
+
+	/**
+	 * Destroy (undo) any initialisation.
+	 */
+	destroy: function() {
+		this.buttons.find('[data-cropper-action]').off('click.phpbb.avatars')
+		this.image.off('crop.phpbb.avatars');
+
+		this.data.val('');
+		this.buttons.hide();
+
+		if (this.cropper !== null) {
+			this.cropper.destroy();
+		}
+	},
+
+	/**
+	 * Bind a function to the avatar driver <select> element.
+	 *
+	 * 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() {
+		this.driver.on('change', function() {
+			if ($(this).val() === phpbb.avatars.driverUpload) {
+				if (phpbb.avatars.input.val() !== '') {
+					phpbb.avatars.input.trigger('change');
+				}
+			} else {
+				phpbb.avatars.destroy();
+			}
+		});
+	},
+
+	/**
+	 * Bind a function to the avatar file upload <input> element.
+	 *
+	 * If a file was chosen and it is a valid image file, the cropper is initialised.
+	 * Otherwise the cropper is destroyed.
+	 */
+	bindInput: function() {
+		this.input.on('change', function() {
+			var fileReader = new FileReader;
+
+			if (this.files[0].type.match('image.*')) {
+				fileReader.readAsDataURL(this.files[0]);
+
+				fileReader.onload = function() {
+					phpbb.avatars.image.cropper('destroy').attr('src', this.result).addClass('avatar');
+					phpbb.avatars.initCropper();
+					phpbb.avatars.initButtons();
+				}
+			} else {
+				phpbb.avatars.destroy();
+			}
+		});
+	},
+
+	/**
+	 * Bind a function to all the cropper <button> elements.
+	 *
+	 * Only buttons with a data-cropper-action attribute are recognized.
+	 * The value for this data attribute should be a function available in the cropper.
+	 * 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() {
+
+		this.buttons.show().find('[data-cropper-action]').off('click.phpbb.avatars').on('click.phpbb.avatars', function() {
+			var option = $(this).data('cropper-action').split(',');
+			var action = option[0];
+
+			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]);
+				} else {
+					phpbb.avatars.image.cropper(action, option[1], option[2]);
+				}
+			}
+		});
+	},
+
+	/**
+	 * Initialise the cropper (CropperJS).
+	 *
+	 * @see https://github.com/fengyuanchen/cropperjs
+	 *
+	 * This creates a cropper instance with a 1 to 1 (square) aspect ratio,
+	 * automatically creates the maximum available and allowed cropping area,
+	 * and registers a callback function for the 'crop' event.
+	 */
+	initCropper: function() {
+		this.cropper = this.image.cropper({
+			aspectRatio: 1,
+			autoCropArea: 1
+		}).data('cropper');
+
+		this.image.off('crop.phpbb.avatars').on('crop.phpbb.avatars', phpbb.avatars.onCrop);
+	},
+
+	/**
+	 * The callback function for the 'crop' event.
+	 *
+	 * This function ensures that the crop area is within the configured dimensions.
+	 * Meaning the width and height can not exceed the limits set by an Administrator.
+	 *
+	 * It also JSON encodes the data array and places it into an <input> element,
+	 * which will be requested server side, and crop the image accordingly.
+	 * Image cropping is done server side, to ensure the best image quality
+	 * and image blobs (from .toBlob()) can only be send through AJAX requests.
+	 *
+	 * @param {object} event
+	 */
+	onCrop: function(event) {
+		var data = phpbb.avatars.data.data();
+		var width = event.detail.width;
+		var height = event.detail.height;
+
+		if (width < data.minWidth || width > data.maxWidth ||
+			height < data.minHeight || height > data.maxHeight
+		) {
+			phpbb.avatars.cropper.setData({
+				width: Math.max(data.minWidth, Math.min(data.maxWidth, width)),
+				height: Math.max(data.minHeight, Math.min(data.maxHeight, height)),
+			});
+		}
+
+		phpbb.avatars.data.val(JSON.stringify(phpbb.avatars.cropper.getData(true)));
+	},
+};
+
+$(function() {
+	phpbb.avatars.init();
+});
+
+})(jQuery); // Avoid conflicts with other libraries