diff --git a/phpBB/assets/javascript/hermite.js b/phpBB/assets/javascript/hermite.js new file mode 100644 index 0000000000..8d80a6aae3 --- /dev/null +++ b/phpBB/assets/javascript/hermite.js @@ -0,0 +1,7 @@ +/** + * hermite-resize - Canvas image resize/resample using Hermite filter with JavaScript. + * @version v2.2.10 + * @link https://github.com/viliusle/miniPaint + * @license MIT + */ +function Hermite_class(){var w,p,_=[];this.init=void(w=navigator.hardwareConcurrency||4),this.getCores=function(){return w},this.resample_auto=function(t,a,e,r,h){var i=this.getCores();window.Worker&&1 { const data = phpbb.avatars.$data.data(); - phpbb.avatars.cropper.getCroppedCanvas({ - width: data.maxWidth, - height: data.maxHeight, + const avatarCanvas = phpbb.avatars.cropper.getCroppedCanvas({ maxWidth: 4096, // High values for max quality cropping maxHeight: 4096, // High values for max quality cropping - imageSmoothingEnabled: false, - imageSmoothingQuality: 'high', - }).toBlob(blob => { + }); + + // eslint-disable-next-line no-undef + const hermiteResize = new Hermite_class(); + hermiteResize.resample_single(avatarCanvas, data.maxWidth, data.maxHeight, true); + + avatarCanvas.toBlob(blob => { const formData = new FormData($this.$form[0]); formData.set('avatar_upload_file', blob, $this.getUploadFileName()); formData.set('submit', '1'); + const canvasDataUrl = avatarCanvas.toDataURL('image/png'); + $.ajax({ url: $this.$form.attr('action'), type: 'POST', data: formData, processData: false, contentType: false, - success: $this.uploadDone, + success(response) { + $this.uploadDone(response, canvasDataUrl); + }, error() { console.log('Upload error'); }, - }).done($this.uploadDone); - }, 'image/png', 1); + }); + }, 'image/png'); return false; }); @@ -174,8 +180,9 @@ /** * Handle response from avatar submission * @param {Object} response AJAX response object + * @param {string} canvasDataUrl Uploaded canvas element as data URL */ - uploadDone(response) { + uploadDone(response, canvasDataUrl) { if (typeof response !== 'object') { return; } @@ -188,6 +195,8 @@ window.location = response.REFRESH_DATA.url.replace('&', '&'); alert.hide(); }, response.REFRESH_DATA.time * 1000); + + phpbb.avatars.image.attr('src', canvasDataUrl); phpbb.avatars.destroy(); } else { phpbb.alert(response.error.title, response.error.messages.join('
')); diff --git a/phpBB/styles/prosilver/template/ucp_avatar_options_upload.html b/phpBB/styles/prosilver/template/ucp_avatar_options_upload.html index 43f55fa3a6..29d732608a 100644 --- a/phpBB/styles/prosilver/template/ucp_avatar_options_upload.html +++ b/phpBB/styles/prosilver/template/ucp_avatar_options_upload.html @@ -6,6 +6,7 @@ {% INCLUDECSS T_ASSETS_PATH ~ '/css/cropper.min.css' %} {% INCLUDEJS T_ASSETS_PATH ~ '/javascript/cropper.min.js' %} {% INCLUDEJS T_ASSETS_PATH ~ '/javascript/jquery-cropper.js' %} +{% INCLUDEJS T_ASSETS_PATH ~ '/javascript/hermite.js' %} {% INCLUDEJS T_ASSETS_PATH ~ '/javascript/phpbb-avatars.js' %}