Configurable width/hight/aspect ratio

Author: technicalguru

js/cropper/cropper-ui.js

@@ -1,102 +1,4 @@
 
-// Methods
-/*
-        case 'getCroppedCanvas':
-          try {
-            data.option = JSON.parse(data.option);
-          } catch (e) {
-            console.log(e.message);
-          }
-
-          if (image.data('uploadedImageType') === 'image/jpeg') {
-            if (!data.option) {
-              data.option = {};
-            }
-
-            data.option.fillColor = '#fff';
-          }
-
-          break;
-      }
-
-      result = cropper[data.method](data.option, data.secondOption);
-
-      switch (data.method) {
-        case 'getCroppedCanvas':
-          if (result) {
-            // Bootstrap's Modal
-            $('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
-
-            if (!download.disabled) {
-              download.download = image.data('uploadedImageName');
-              download.href = result.toDataURL(image.data('uploadedImageType'));
-            }
-          }
-
-          break;
-
-        case 'destroy':
-          cropper = null;
-
-          if (image.data('uploadedImageURL')) {
-            URL.revokeObjectURL(image.data('uploadedImageURL'));
-            image.data('uploadedImageURL', '');
-            image.attr('src') = image.data('originalImageURL');
-          }
-
-          break;
-      }
-
-      if (typeof result === 'object' && result !== cropper && input) {
-        try {
-          input.value = JSON.stringify(result);
-        } catch (e) {
-          console.log(e.message);
-        }
-      }
-    }
-  });
-
-jQuery('.cropper .docs-toggles').on('change', function() {
-    var e = event || window.event;
-    var target = e.target || e.srcElement;
-    var cropBoxData;
-    var canvasData;
-    var isCheckbox;
-    var isRadio;
-
-    if (target.tagName.toLowerCase() === 'label') {
-      target = target.querySelector('input');
-    }
-
-    isCheckbox = target.type === 'checkbox';
-    isRadio = target.type === 'radio';
-
-    if (isCheckbox || isRadio) {
-      if (isCheckbox) {
-        options[target.name] = target.checked;
-        cropBoxData = cropper.getCropBoxData();
-        canvasData = cropper.getCanvasData();
-
-        options.ready = function () {
-          console.log('ready');
-          cropper.setCropBoxData(cropBoxData).setCanvasData(canvasData);
-        };
-      } else {
-        options[target.name] = target.value;
-        options.ready = function () {
-          console.log('ready');
-        };
-      }
-
-      // Restart
-      cropper.destroy();
-      cropper = new Cropper(image, options);
-    }
-  }
-);
-*/
-
 jQuery('.cropper input[type="file"]').on('change', function() {
 	var files = this.files;
 	var file;
@@ -245,7 +147,8 @@ class CropperUI {
 		var elem = jQuery(domElement);
 		options.destroyed = false;
 		if (!cropperOptions) cropperOptions = {};
-		cropperOptions.aspectRatio= 1;
+		var mainElem = elem.closest('.cropper');
+		cropperOptions.aspectRatio = mainElem.data('aspect-ratio');
 		options.cropper   = new Cropper(domElement, cropperOptions);
 		elem.data('upload', options);
 		this.registerEvents(domElement);

src/WebApp/BootstrapTheme/NewImageUploadRenderer.php

@@ -8,7 +8,10 @@ class NewImageUploadRenderer extends \WebApp\DefaultTheme\DivRenderer {
 
 	public function __construct($theme, $component) {
 		parent::__construct($theme, $component);
-		$this->addClass('cropper');
+		$this->addClass('cropper')
+			->setData('width', $component->getWidth())
+			->setData('height', $component->getHeight())
+			->setData('aspect-ratio', $component->getAspectRatio());
 		$this->theme->addFeature(\WebApp\BootstrapTheme\BootstrapTheme::CROPPERJS);
 	}
 
@@ -41,8 +44,10 @@ public function renderEditor() {
 			$did = $id;
 			break;
 		}
-		$rc  = '<div class="cropper-editor" style="max-width: 400px; max-height: 400px; margin: 20px;">'.
-		          '<img data-imgid="'.$did.'" class="cropper-image" style="background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC\'); width: 400px; height: 400px;" src="'.$src.'">'.
+		$width  = $this->component->getWidth();
+		$height = $this->component->getHeight();
+		$rc  = '<div class="cropper-editor" style="max-width: '.$width.'px; max-height: '.$height.'px; margin: 20px;">'.
+		          '<img data-imgid="'.$did.'" class="cropper-image" style="background-image: url(\'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC\'); width: '.$width.'px; height: '.$height.'px;" src="'.$src.'">'.
 		          $this->renderActions().
 		          //$this->renderDocToggles().
 		       '</div>';

src/WebApp/Component/NewImageUpload.php

@@ -32,29 +32,19 @@ public function getImages() {
 		return $this->config->images;
 	}
 
-	
-/*
-	public static function isImageRemoved($name) {
-		$ind = intval(\TgUtils\Request::getRequest()->getPostParam('iu-remove-'.$name, 0)) == 1;
-		$newFile = isset($_FILES['iu-'.$name]) && ($_FILES['iu-'.$name]['error'] == 0);
-		return $newFile || $ind;
-	}
-
-	public static function getImage($name) {
-		return FileInput::getFile('iu-'.$name);
-	}
-
-	public static function handleImageUpload($name, $targetDir) {
-		$rc = FileInput::handleFileUpload('iu-'.$name, $targetDir);
-		if (($rc != NULL) && ($rc['filename'] != NULL)) {
-			$info = getimagesize($targetDir.'/'.$rc['filename']);
-			$rc['mime']   = $info['mime'];
-			$rc['width']  = $info[0];
-			$rc['height'] = $info[1];
-			$rc['ratio']  = $info[0] / $info[1];
+	public function getWidth() {
+		return $this->config->width;
+	}
+
+	public function getHeight() {
+		return $this->config->height;
+	}
+
+	public function getAspectRatio() {
+		if (!isset($this->config->aspectRatio)) {
+			$this->config->aspectRatio = round($this->config->width / $this->config->height, 2);
 		}
-		return $rc;
+		return $this->config->aspectRatio;
 	}
-*/
 }