Set initial selection to the center of the image

[chiragshah-mb]

How do I set the initial selection to the center of the image using config? Here's the config statement: angular.module('app').config(function (ngJcropConfigProvider) { ngJcropConfigProvider.setJcropConfig({ bgColor: 'black', bgOpacity: .4, aspectRatio: 2 / 1, setSelect: [ 0, 0, 50, 50 ] }); });

setSelect: [ 0, 0, 50, 50 ] starts from top-left. How do I make it center irrespective to the size of the image.

[andrefarzat]

hello @chiragshah-mb, it is not by config, it is using the selection. Example:

// you define it in your controller
$scope.obj.selection = [0, 0, 50, 50, 50, 50];

<!-- you pass it to the ng-jcrop directive -->
<div ng-jcrop="obj.src" selection="obj.selection"></div>    

You can see the code in the examples to understand better: https://github.com/andrefarzat/ng-jcrop#usage

If you're still in doubt, please reopen the issue 😺

[chiragshah-mb]

Okay got that. Assume selection window width & height to be 100px. Also, the image dimensions are not fixed. Now how do I get that selection window at the center of the image?

[andrefarzat]

@chiragshah-mb it would be necessary to listen to the JcropChangeSrc event and grab the image element to figure out the width/height, calculate the center and then add these values to $scope.obj.selection. You can listen the JcropChangeSrc ( check the code here ) or listen direct in the image element using the ng-jcrop-image class ( check the code here )

[chiragshah-mb]

$scope.image = angular.element(".jcrop-holder"); console.log($scope.image); console.log($scope.image.attr('width'));

This code doesn't give me any width. Can you help me out