From 804d245e5571248d9a436d47939c8afc57eefe9b Mon Sep 17 00:00:00 2001 From: Joe Simpson Date: Thu, 25 Feb 2021 21:24:22 +0000 Subject: [PATCH 1/2] Update Git to the latest version from WordPress.org --- canvas-image-resize.php | 227 +++++++++++++++++++++++++++------------- readme.txt | 10 +- 2 files changed, 160 insertions(+), 77 deletions(-) diff --git a/canvas-image-resize.php b/canvas-image-resize.php index de6d753..59f72fc 100755 --- a/canvas-image-resize.php +++ b/canvas-image-resize.php @@ -3,14 +3,17 @@ /* Plugin Name: Canvas Image Resize Description: Re-sizes images right inside the browser BEFORE uploading them. -Version: 1.0.0 +Version: 1.0.1 Author: Simon Sippert Author URI: http://www.sippsolutions.de/ +Text Domain: canvas-image-resize +Domain Path: /lang +License: GNU */ /* Canvas Image Resize, a plugin for WordPress -Copyright (C) 2016 Simon Sippert, sippsolutions (http://www.sippsolutions.de) +Copyright (C) 2017 Simon Sippert, sippsolutions (http://www.sippsolutions.de) This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by @@ -27,224 +30,300 @@ */ /** - * Canvas Image Resize Main Class + * Canvas Image Resize * - * @copyright 2016 Simon Sippert + * @copyright 2017 Simon Sippert */ -class Canvas_Image_Resize +class CanvasImageResize { /** - * Defines the plugin name + * Define the plugin name * - * @type string + * @var string */ const PLUGIN_NAME = 'Canvas Image Resize'; /** * Defines the text domain * - * @type string + * @var string */ const TEXT_DOMAIN = 'canvas-image-resize'; /** * Defines the plugin's options page name * - * @type string + * @var string */ const OPTIONS_PAGE_NAME = 'cir_options'; /** * Field name for max width * - * @type string + * @var string */ const FIELD_IMAGE_MAX_WIDTH = 'image_max_width'; /** * Field name for max height * - * @type string + * @var string */ const FIELD_IMAGE_MAX_HEIGHT = 'image_max_height'; /** * Field name for max quality * - * @type string + * @var string */ const FIELD_IMAGE_MAX_QUALITY = 'image_max_quality'; /** - * Stores default options + * Store default options * * @var array */ - protected $_defaultOptions = array( + protected $defaultOptions = array( self::FIELD_IMAGE_MAX_WIDTH => 1600, self::FIELD_IMAGE_MAX_HEIGHT => 1600, self::FIELD_IMAGE_MAX_QUALITY => 100, ); /** - * Initializes the plugin + * Initialize the plugin */ - public function __construct() { - $this->_initFilterSettings(); - $this->_initPluginPage(); + public function __construct() + { + $this->initPlugin(); + $this->initPluginPage(); } /** - * Initializes the filter settings + * Initialize the filter settings + * + * @return void */ - protected function _initFilterSettings() { - add_filter('plupload_default_settings', array($this, 'setImageSettings'), 100); - add_filter('plupload_default_params', array($this, 'setImageSettings'), 100); - add_filter('plupload_init', array($this, 'setImageSettings'), 100); + protected function initPlugin() + { + // define function + $setImageSettingsFunction = 'setImageSettings'; + // add filters + add_filter('plupload_default_settings', array($this, $setImageSettingsFunction), 100); + add_filter('plupload_default_params', array($this, $setImageSettingsFunction), 100); + add_filter('plupload_init', array($this, $setImageSettingsFunction), 100); } /** - * Initializes the plugin page + * Initialize the plugin page + * + * @return void */ - protected function _initPluginPage() { + protected function initPluginPage() + { + add_action('plugins_loaded', array($this, 'addTextDomain')); add_action('admin_init', array($this, 'initOptionsPage')); add_action('admin_menu', array($this, 'addOptionsPage')); add_filter('plugin_action_links_' . plugin_basename(__FILE__), array($this, 'addPluginPage')); } /** - * Adds the plugin page + * Add text domain + * + * @return void + */ + public function addTextDomain() + { + load_plugin_textdomain(static::TEXT_DOMAIN, false, dirname(plugin_basename(__FILE__)) . '/lang'); + } + + /** + * Get plugin name + * + * @return string + */ + protected function getPluginName() + { + return __(static::PLUGIN_NAME, static::TEXT_DOMAIN); + } + + /** + * Get options name + * + * @return string + */ + protected function getOptionsName() + { + return static::TEXT_DOMAIN . '_settings'; + } + + /** + * Get options + * + * @return array + */ + protected function getOptions() + { + return wp_parse_args(get_option($this->getOptionsName()), $this->defaultOptions); + } + + /** + * Add the plugin page * * @param array $links * @return array */ - public function addPluginPage(array $links) { - array_unshift($links, '' . __('Settings') . ''); + public function addPluginPage(array $links) + { + array_unshift($links, '' . __('Settings', static::TEXT_DOMAIN) . ''); return $links; } /** - * Adds the options page + * Add the options page + * + * @return void */ - public function addOptionsPage() { - add_options_page(self::PLUGIN_NAME, self::PLUGIN_NAME, 'manage_options', self::TEXT_DOMAIN, array($this, 'renderOptionsPage')); + public function addOptionsPage() + { + add_options_page($this->getPluginName(), $this->getPluginName(), 'manage_options', static::TEXT_DOMAIN, array($this, 'renderOptionsPage')); } /** - * Renders the options page + * Render the options page + * + * @return void */ - public function initOptionsPage() { + public function initOptionsPage() + { // add the possibility to add settings - register_setting(self::OPTIONS_PAGE_NAME, self::TEXT_DOMAIN . '_settings'); + register_setting(static::OPTIONS_PAGE_NAME, $this->getOptionsName()); // set section name - $sectionName = implode('_', array(self::TEXT_DOMAIN, self::OPTIONS_PAGE_NAME, 'general')); + $sectionName = implode('_', array(static::TEXT_DOMAIN, static::OPTIONS_PAGE_NAME, 'general')); // add section add_settings_section( $sectionName, - __('General settings'), + __('General settings', static::TEXT_DOMAIN), null, - self::OPTIONS_PAGE_NAME + static::OPTIONS_PAGE_NAME ); // add fields add_settings_field( - self::FIELD_IMAGE_MAX_WIDTH, - __('Maximum width of images'), + static::FIELD_IMAGE_MAX_WIDTH, + __('Maximum width of images', static::TEXT_DOMAIN), array($this, 'renderFieldGeneralImageMaxWidth'), - self::OPTIONS_PAGE_NAME, + static::OPTIONS_PAGE_NAME, $sectionName ); add_settings_field( - self::FIELD_IMAGE_MAX_HEIGHT, - __('Maximum height of images'), + static::FIELD_IMAGE_MAX_HEIGHT, + __('Maximum height of images', static::TEXT_DOMAIN), array($this, 'renderFieldGeneralImageMaxHeight'), - self::OPTIONS_PAGE_NAME, + static::OPTIONS_PAGE_NAME, $sectionName ); add_settings_field( - self::FIELD_IMAGE_MAX_QUALITY, - __('Quality of images (0-100)'), + static::FIELD_IMAGE_MAX_QUALITY, + __('Quality of images (0-100)', static::TEXT_DOMAIN), array($this, 'renderFieldGeneralImageMaxQuality'), - self::OPTIONS_PAGE_NAME, + static::OPTIONS_PAGE_NAME, $sectionName ); } /** - * Renders the options page + * Render the options page + * + * @return void */ - public function renderOptionsPage() { + public function renderOptionsPage() + { ?>
-

+

getPluginName(); ?>

-

+

- _defaultOptions); + protected function renderField($name, $type = 'number') + { + $options = $this->getOptions(); ?> - []' + '> - _renderField(self::FIELD_IMAGE_MAX_WIDTH); + public function renderFieldGeneralImageMaxWidth() + { + $this->renderField(static::FIELD_IMAGE_MAX_WIDTH); } /** - * Renders a specific field + * Render a specific field + * + * @return void */ - public function renderFieldGeneralImageMaxHeight() { - $this->_renderField(self::FIELD_IMAGE_MAX_HEIGHT); + public function renderFieldGeneralImageMaxHeight() + { + $this->renderField(static::FIELD_IMAGE_MAX_HEIGHT); } /** - * Renders a specific field + * Render a specific field + * + * @return void */ - public function renderFieldGeneralImageMaxQuality() { - $this->_renderField(self::FIELD_IMAGE_MAX_QUALITY); + public function renderFieldGeneralImageMaxQuality() + { + $this->renderField(static::FIELD_IMAGE_MAX_QUALITY); } /** - * Sets image re-sizing settings + * Set image re-sizing settings * [Does all the magic :3] * * @param array $defaults * @return array */ - public function setImageSettings(array $defaults) { + public function setImageSettings(array $defaults) + { // get options - $options = wp_parse_args(get_option(self::TEXT_DOMAIN . '_settings'), $this->_defaultOptions); + $options = $this->getOptions(); // set values $defaults['resize'] = array( - 'width' => abs((int)$options[self::FIELD_IMAGE_MAX_WIDTH]), - 'height' => abs((int)$options[self::FIELD_IMAGE_MAX_HEIGHT]), - 'quality' => abs((int)$options[self::FIELD_IMAGE_MAX_QUALITY]), + 'width' => abs((int)$options[static::FIELD_IMAGE_MAX_WIDTH]), + 'height' => abs((int)$options[static::FIELD_IMAGE_MAX_HEIGHT]), + 'quality' => abs((int)$options[static::FIELD_IMAGE_MAX_QUALITY]), ); return $defaults; } } // init -new Canvas_Image_Resize(); +new CanvasImageResize(); diff --git a/readme.txt b/readme.txt index 2a7ff66..fd2ab04 100755 --- a/readme.txt +++ b/readme.txt @@ -3,8 +3,8 @@ Contributors: sippsolutions Donate link: https://www.paypal.me/sippert Tags: image, upload, processing, canvas Requires at least: 3.3.2 -Tested up to: 4.4.2 -Stable tag: 1.0.0 +Tested up to: 5.6 +Stable tag: 1.0.1 License: GPLv2 License URI: http://www.gnu.org/licenses/gpl-2.0.html @@ -12,7 +12,8 @@ Re-sizes images right inside the browser BEFORE uploading them. == Description == -If you host your site in a very poor environment, WordPress may fail uploading large images as the process of creating the different sizes and thumbnails takes a large amount of CPU usage. +If you host your site in a poor environment, WordPress may fail uploading large images as the process of creating the different sizes and thumbnails takes a large amount of CPU usage. + With this Plugin the images are simply resized to a maximum dimension (of for example 1600 x 1600 pixels) right in your browser before uploading them. The nice side effect is that unnecessary big images are resized to a fine size to still provide a usable, qualitative image. @@ -29,6 +30,9 @@ Logo credits: Picture graphic by Flaticon from Freepik. == Changelog == += 1.0.1 = +* Translated the plugin in German. + = 1.0 = * Implemented the functionality on media gallery page. * Added settings page. From 6598cbc3ef1a83b2f9a3a32fe4ff65552f2d86a4 Mon Sep 17 00:00:00 2001 From: Joe Simpson Date: Thu, 25 Feb 2021 22:43:19 +0000 Subject: [PATCH 2/2] Resize before measuring filesize --- canvas-image-resize.php | 10 ++++-- script.js | 78 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 85 insertions(+), 3 deletions(-) create mode 100644 script.js diff --git a/canvas-image-resize.php b/canvas-image-resize.php index 59f72fc..702aee7 100755 --- a/canvas-image-resize.php +++ b/canvas-image-resize.php @@ -121,7 +121,7 @@ protected function initPlugin() protected function initPluginPage() { add_action('plugins_loaded', array($this, 'addTextDomain')); - add_action('admin_init', array($this, 'initOptionsPage')); + add_action('admin_init', array($this, 'initAdmin')); add_action('admin_menu', array($this, 'addOptionsPage')); add_filter('plugin_action_links_' . plugin_basename(__FILE__), array($this, 'addPluginPage')); } @@ -189,11 +189,11 @@ public function addOptionsPage() } /** - * Render the options page + * Register the options and additional script * * @return void */ - public function initOptionsPage() + public function initAdmin() { // add the possibility to add settings register_setting(static::OPTIONS_PAGE_NAME, $this->getOptionsName()); @@ -231,6 +231,10 @@ public function initOptionsPage() static::OPTIONS_PAGE_NAME, $sectionName ); + + // Add additional script which resizes images before checking + // the image size + wp_enqueue_script('plupload-additional', plugin_dir_url( __FILE__ ) . 'script.js', array('plupload'), null, true); } /** diff --git a/script.js b/script.js new file mode 100644 index 0000000..3dd54f3 --- /dev/null +++ b/script.js @@ -0,0 +1,78 @@ +/** + * Modify plupload to resize images before checking the image size + */ + + +if(window['plupload']) { + + // Copied from plupload source code as this function is inaccessible + function resizeImage(blob, params, cb) { + var img = new mOxie.Image(); // o in source code = mOxie in global + + try { + img.onload = function() { + // no manipulation required if... + if (params.width > this.width && + params.height > this.height && + params.quality === undef && + params.preserve_headers && + !params.crop + ) { + this.destroy(); + return cb(blob); + } + // otherwise downsize + img.downsize(params.width, params.height, params.crop, params.preserve_headers); + }; + + img.onresize = function() { + cb(this.getAsBlob(blob.type, params.quality)); + this.destroy(); + }; + + img.onerror = function() { + cb(blob); + }; + + img.load(blob); + } catch(ex) { + console.log(ex); + cb(blob); + } + } + + // Bit of a hack to actually modify plupload inline + let oldInit = plupload.Uploader; + plupload.Uploader = function() { + + oldInit.apply(this, arguments); + + // Hook into pluploader here + if(this['addFile']) { + let oldAddFile = this.addFile; + // Override addFile to resize the image first! + this.addFile = function(files, fileName) { + let self = this; + + // Always assume arrays are being processed + if(mOxie.typeOf(files) !== 'array') { + files = [files]; + } + + mOxie.each(files, function(file){ + // Resize them using pluploader resizer code + resizeImage.call(this, file, self.settings.resize, function(resizedBlob) { + // Now pass the new resized file down into the original function which should + // allow most large images to upload without issues + oldAddFile.call(self, resizedBlob, fileName); + }); + }); + + }; + } + + } + plupload.Uploader.prototype = oldInit.prototype; + + +}