芝麻web文件管理V1.00
编辑当前文件:/home2/sdektunc/www/media/plg_media-action_rotate/js/rotate.js
/** * @copyright (C) 2018 Open Source Matters, Inc.
* @license GNU General Public License version 2 or later; see LICENSE.txt */ let activated = false; // Update image const rotate = (angle, image) => { // The canvas where we will rotate the image let canvas = document.createElement('canvas'); // Pseudo rectangle calculation if (angle >= 0 && angle < 45 || angle >= 135 && angle < 225 || angle >= 315 && angle <= 360) { canvas.width = image.naturalWidth; canvas.height = image.naturalHeight; } else { // swap canvas.width = image.naturalHeight; canvas.height = image.naturalWidth; } const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate(angle * Math.PI / 180); ctx.drawImage(image, -image.naturalWidth / 2, -image.naturalHeight / 2); // The format const format = Joomla.MediaManager.Edit.original.extension === 'jpg' ? 'jpeg' : 'jpg'; // The quality const quality = document.getElementById('jform_rotate_quality').value; // Creating the data from the canvas Joomla.MediaManager.Edit.current.contents = canvas.toDataURL(`image/${format}`, quality); // Updating the preview element image.width = canvas.width; image.height = canvas.height; image.src = ''; requestAnimationFrame(() => requestAnimationFrame(() => { image.src = Joomla.MediaManager.Edit.current.contents; })); // Update the angle input box document.getElementById('jform_rotate_a').value = angle; // Notify the app that a change has been made window.dispatchEvent(new Event('mediaManager.history.point')); canvas = null; }; const initRotate = image => { if (!activated) { // The number input listener document.getElementById('jform_rotate_a').addEventListener('change', ({ target }) => { rotate(parseInt(target.value, 10), image); target.value = 0; // Deselect all buttons [].slice.call(document.querySelectorAll('#jform_rotate_distinct label')).forEach(element => { element.classList.remove('active'); element.classList.remove('focus'); }); }); // The 90 degree rotate buttons listeners [].slice.call(document.querySelectorAll('#jform_rotate_distinct [type=radio]')).forEach(element => { element.addEventListener('click', ({ target }) => { rotate(parseInt(target.value, 10), image); // Deselect all buttons [].slice.call(document.querySelectorAll('#jform_rotate_distinct label')).forEach(el => { el.classList.remove('active'); el.classList.remove('focus'); }); }); }); activated = true; } }; window.addEventListener('media-manager-edit-init', () => { // Register the Events Joomla.MediaManager.Edit.plugins.rotate = { Activate(image) { return new Promise(resolve => { // Initialize initRotate(image); resolve(); }); }, Deactivate() /* image */ { return new Promise(resolve => { resolve(); }); } }; }, { once: true });