Merge pull request #29 from derpue/maxImageSizeOptions

Fixing #24 and separate preview image size from upload image size
prestaconcept · Jun 26, 2017 · 10e2774 · 10e2774
2 parents 2b919ed + 9e253d6
commit 10e2774
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 18 deletions.
diff --git a/Form/Type/ImageType.php b/Form/Type/ImageType.php
@@ -13,6 +13,7 @@
 use Symfony\Component\Form\FormInterface;
 use Symfony\Component\Form\FormView;
 use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\Component\OptionsResolver\Options;
 use Symfony\Component\Translation\TranslatorInterface;
 use Vich\UploaderBundle\Handler\UploadHandler;
 use Vich\UploaderBundle\Storage\StorageInterface;
@@ -89,6 +90,12 @@ public function configureOptions(OptionsResolver $resolver)
             ->setDefault('cropper_options', ['autoCropArea' => 1])
             ->setDefault('max_width', 320)
             ->setDefault('max_height', 180)
+            ->setDefault('preview_width', function (Options $options) {
+                return $options['max_width'];
+            })
+            ->setDefault('preview_height', function (Options $options) {
+                return $options['max_height'];
+            })
             ->setDefault('download_uri', null)
             ->setDefault('download_link', true)
             ->setDefault('enable_locale', true)
@@ -106,6 +113,8 @@ public function buildView(FormView $view, FormInterface $form, array $options)
         $view->vars['cropper_options'] = json_encode($options['cropper_options']);
         $view->vars['max_width'] = $options['max_width'];
         $view->vars['max_height'] = $options['max_height'];
+        $view->vars['preview_width'] = $options['preview_width'];
+        $view->vars['preview_height'] = $options['preview_height'];
         $view->vars['enable_locale'] = $options['enable_locale'];
         $view->vars['enable_remote'] = $options['enable_remote'];
         $view->vars['object'] = $form->getParent()->getData();

diff --git a/README.md b/README.md
@@ -105,16 +105,19 @@ Available options for the `ImageType`:
 
 - `aspect_ratio` (`array`): a list of aspect ratio to apply when resizing an image
 - `cropper_options` (`array`): a list of options supported by cropper (default: `['autoCropArea' => 1]`)
-- `max_width` (`int`): the max width to use when displaying the image preview (default: `320`)
-- `max_height` (`int`): the max height to use when displaying the image preview (default: `180`)
+- `max_width` (`int`): the max width of the cropped image send to server (default: `320`)
+- `max_height` (`int`): the max height of the cropped image send to server (default: `180`)
+- `preview_width` (`int`): the max width to use when displaying the image preview (default: `320`)
+- `preview_height` (`int`): the max height to use when displaying the image preview (default: `180`)
 - `download_uri` (`string`): the path where the image is located (default: `null`, automatically set)
 - `download_link` (`bool`): whether the end user should be able to add a remote image by URL (default: `true`)
 
 #### Notes
 
 You can find Cropper options [here](https://github.com/fengyuanchen/cropper#options).
 
-The `max_width` and `max_height` options are used to define the preview canvas dimensions from which the image is generated.
+The `max_width` and `max_height` options are used to define maximum size the cropped uploaded image will be.
+Bigger images (after cropping) are scaled down.
 
 ## Contributing
 

diff --git a/Resources/public/js/cropper.js b/Resources/public/js/cropper.js
@@ -173,22 +173,32 @@
      */
     Cropper.prototype.crop = function() {
         var data = this.$container.$preview.children('img').cropper('getCropBoxData'),
-            width = this.$container.$canvas.data('max-width') < data.width
-                ? this.$container.$canvas.data('max-width')
-                : data.width,
-            height = this.$container.$canvas.data('max-height') < data.height
-                ? this.$container.$canvas.data('max-height')
-                : data.height,
-            canvas = this.$container.$preview.children('img').cropper('getCroppedCanvas', {
-                width: width,
-                height: height
+            image_width = Math.min(this.$el.data('max-width'), data.width),
+            image_height = Math.min(this.$el.data('max-height'), data.height),
+            preview_width = Math.min(this.$container.$canvas.data('preview-width'), data.width),
+            preview_height = Math.min(this.$container.$canvas.data('preview-height'), data.height),
+
+            // TODO: getCroppedCanvas seams to only consider one dimension when calculating the maximum size
+            // in respect to the aspect ratio and always considers width first, so height is basically ignored!
+            // To set a maximum height, no width parameter should be set.
+            // Example of current wrong behavior:
+            // source of 200x300 with resize to 150x200 results in 150x225 => WRONG (should be: 133x200)
+            // source of 200x300 with resize to 200x150 results in 200x300 => WRONG (should be: 100x150)
+            // This is an issue with cropper, not this library
+            preview_canvas = this.$container.$preview.children('img').cropper('getCroppedCanvas', {
+                width: preview_width,
+                height: preview_height
+            }),
+            image_canvas = this.$container.$preview.children('img').cropper('getCroppedCanvas', {
+                width: image_width,
+                height: image_height
             });
 
-        // fill canvas container with cropped image
-        this.$container.$canvas.html(canvas);
+        // fill canvas preview container with cropped image
+        this.$container.$canvas.html(preview_canvas);
 
         // fill input with base64 cropped image
-        this.$input.val(canvas.toDataURL());
+        this.$input.val(image_canvas.toDataURL());
 
         // hide the modal
         this.$modal.modal('hide');

diff --git a/Resources/views/form/image_widget.html.twig b/Resources/views/form/image_widget.html.twig
@@ -2,10 +2,10 @@
 
 {% block image_widget %}
 {% spaceless %}
-    <div class="cropper" data-cropper-options="{{ form.vars.cropper_options }}">
-        <div class="cropper-canvas-container{% if form.delete is defined %} cropper-canvas-has-delete{% endif %}" data-max-width="{{ max_width }}" data-max-height="{{ max_height }}">
+    <div class="cropper" data-cropper-options="{{ form.vars.cropper_options }}" data-max-width="{{ max_width }}" data-max-height="{{ max_height }}">
+        <div class="cropper-canvas-container{% if form.delete is defined %} cropper-canvas-has-delete{% endif %}" data-preview-width="{{ preview_width }}" data-preview-height="{{ preview_height }}">
             {% if form.vars.download_uri %}
-                <img src="{{ asset(form.vars.download_uri) }}">
+                <img src="{{ asset(form.vars.download_uri) }}" style="max-width: {{ preview_width }}px; max-height: {{ preview_height }}px;">
             {% endif %}
         </div>
         {{ form_row(form.base64) }}