[BUGFIX] Show preview after cropping image 08/38808/2
authorFrans Saris <franssaris@gmail.com>
Sun, 19 Apr 2015 18:37:14 +0000 (20:37 +0200)
committerAndreas Fernandez <andreas.fernandez@aspedia.de>
Tue, 21 Apr 2015 12:09:42 +0000 (14:09 +0200)
Resolves: #66441
Releases: master
Change-Id: I3e7e8b5b69daf9c2795c9860db576727621bd948
Reviewed-on: http://review.typo3.org/38808
Reviewed-by: Markus Klein <klein.t3@reelworx.at>
Tested-by: Felix Kopp <felix-source@phorax.com>
Reviewed-by: Andreas Fernandez <andreas.fernandez@aspedia.de>
Tested-by: Andreas Fernandez <andreas.fernandez@aspedia.de>
typo3/sysext/backend/Classes/Form/Element/ImageManipulationElement.php
typo3/sysext/backend/Resources/Public/JavaScript/ImageManipulation.js
typo3/sysext/t3skin/Resources/Private/Styles/TYPO3/_element_cropper.less
typo3/sysext/t3skin/Resources/Public/Css/visual/t3skin.css

index 8fdf6bb..b2e3d84 100644 (file)
@@ -183,20 +183,30 @@ class ImageManipulationElement extends AbstractFormElement {
         * @return string
         */
        public function getPreview(File $file, $crop) {
-               $preview = '';
+               $thumbnail = '';
+               $maxWidth = 150;
+               $maxHeight = 200;
                if ($crop) {
-                       $imageSetup = array('width' => '150m', 'height' => '200m', 'crop' => $crop);
+                       $imageSetup = array('maxWidth' => $maxWidth, 'maxHeight' => $maxHeight, 'crop' => $crop);
                        $processedImage = $file->process(\TYPO3\CMS\Core\Resource\ProcessedFile::CONTEXT_IMAGECROPSCALEMASK, $imageSetup);
                        // Only use a thumbnail if the processing process was successful by checking if image width is set
                        if ($processedImage->getProperty('width')) {
                                $imageUrl = $processedImage->getPublicUrl(TRUE);
-                               $preview = '<img src="' . $imageUrl . '" ' .
-                                       'class="media-object thumbnail thumbnail-status" ' .
+                               $thumbnail = '<img src="' . $imageUrl . '" ' .
+                                       'class="thumbnail thumbnail-status" ' .
                                        'width="' . $processedImage->getProperty('width') . '" ' .
                                        'height="' . $processedImage->getProperty('height') . '" >';
                        }
                }
-               return '<div class="media-left t3js-image-manipulation-preview' . ($preview ? '' : ' hide'). '">' . $preview . '</div>';
+
+               $preview = '<div class="media-left">';
+               $preview .= '<div class="t3js-image-manipulation-preview media-object' . ($thumbnail ? '' : ' hide'). '" ';
+               // Set preview width/height needed by cropper
+               $preview .= 'data-preview-width="' . $maxWidth . '" data-preview-height="' . $maxHeight . '">';
+               $preview .= $thumbnail;
+               $preview .= '</div></div>';
+
+               return $preview;
        }
 
        /**
index 7d659d3..536e03a 100644 (file)
@@ -243,7 +243,8 @@ define('TYPO3/CMS/Backend/ImageManipulation', ['jquery', 'TYPO3/CMS/Backend/Moda
                        $formGroup.find('.t3js-image-manipulation-info-crop-y').text(Math.round(cropData.y) + 'px');
                        $formGroup.find('.t3js-image-manipulation-info-crop-width').text(Math.round(cropData.width) + 'px');
                        $formGroup.find('.t3js-image-manipulation-info-crop-height').text(Math.round(cropData.height) + 'px');
-
+                       $formGroup.find('.t3js-image-manipulation-preview').removeClass('hide');
+                       ImageManipulation.setPreviewImage();
                } else {
                        $formGroup.find('.t3js-image-manipulation-info').addClass('hide');
                        $formGroup.find('.t3js-image-manipulation-preview').addClass('hide');
@@ -270,6 +271,49 @@ define('TYPO3/CMS/Backend/ImageManipulation', ['jquery', 'TYPO3/CMS/Backend/Moda
                }
        };
 
+       /**
+        * Set preview image
+        */
+       ImageManipulation.setPreviewImage = function() {
+               var $preview = ImageManipulation.$trigger.closest('.form-group').find('.t3js-image-manipulation-preview');
+               if ($preview.length === 0) {
+                       return;
+               }
+               var $image = ImageManipulation.getCropper();
+               var imageData = $image.cropper('getImageData');
+               var cropData = $image.cropper('getData');
+               var previewWidth = $preview.data('preview-width');
+               var previewHeight = $preview.data('preview-height');
+
+               // Adjust aspect ratio of preview width/height
+               var aspectRatio = cropData.width / cropData.height;
+               var tmpHeight = previewWidth / aspectRatio;
+               if (tmpHeight > previewHeight) {
+                       previewWidth = previewHeight * aspectRatio;
+               } else {
+                       previewHeight = tmpHeight;
+               }
+               // preview should never be up-scaled
+               if (previewWidth > cropData.width) {
+                       previewWidth = cropData.width;
+                       previewHeight = cropData.height;
+               }
+
+               var ratio = previewWidth / cropData.width;
+
+               var $viewBox = $('<div />').html('<img src="' + $image.attr('src') + '">');
+               $viewBox.addClass('cropper-preview-container');
+               $preview.empty().append($viewBox);
+               $viewBox.wrap('<span class="thumbnail thumbnail-status"></span>');
+
+               $viewBox.width(previewWidth).height(previewHeight).find('img').css({
+                       width: imageData.naturalWidth * ratio,
+                       height: imageData.naturalHeight * ratio,
+                       left: -cropData.x * ratio,
+                       top: -cropData.y * ratio
+               });
+       };
+
        return function() {
                TYPO3.ImageManipulation = ImageManipulation;
                return ImageManipulation;
index 708bb18..ef6364c 100644 (file)
 }
 .cropper-image-container {
 
+}
+.cropper-preview-container {
+       overflow: hidden;
+       position: relative;
+       img {
+               display: block;
+               position: absolute;
+               width: 100%;
+               min-width: 0!important;
+               min-height: 0!important;
+               max-width: none!important;
+               max-height: none!important;
+       }
 }
\ No newline at end of file
index a8c7c19..475ae46 100644 (file)
@@ -8281,6 +8281,19 @@ table#typo3-clipboard tr.bgColor5 td img {
 .cropper-bg {
   background-image: url("../../Images/cropper-background.png");
 }
+.cropper-preview-container {
+  overflow: hidden;
+  position: relative;
+}
+.cropper-preview-container img {
+  display: block;
+  position: absolute;
+  width: 100%;
+  min-width: 0!important;
+  min-height: 0!important;
+  max-width: none!important;
+  max-height: none!important;
+}
 .t3-help-link {
   display: inline!important;
 }