Setting Initial zoom value

[Ashviniv]

How to set initial zoom value?.When I am selecting an image it is showing zoomed. I want to decrease the zoom value.I think initially it is set to max value. But, I want to set it to minimum value.How do I do that? I have tried with setZoom option. It didn't work for me.Example I tried:

$uploadCrop = $('#upload-demo').croppie({
        viewport: {
            width: 200,
            height: 200,
            type: 'square'
        },
        boundary: {
            width: 700,
            height: 300
        }

    });

 $uploadCrop.croppie 'setZoom', 0.5

[thedustinsmith]

You need to bind your image before you call setZoom - the zoom values are recalculated when you call bind.

[Ashviniv]

Yes, I had binded image before calling setZoom.Still didnot work for me. Finally I got the solution by changing initialZoom in the croppie.js line to average of minZoom and maxZoom.

[thedustinsmith]

Interesting - what we're trying to do there is fit the image to the width of the boundary. I guess we should probably fit that within the min and max zooms. Thanks for the heads up.

[GaganTiwari]

I am also facing too much problem in setting zoom level at begining. It ll be great help if any one tell me exact solution to set no zoom when assign a image to cropper as default.

Thanks in advance.

[Ashviniv]

@GaganTiwari There is one option present , If you want to set no zoom while assigning an image to cropper as default that is, set enableZoom: false while initializing croppie. So your initialization will look like:

$uploadCrop = $('#upload-demo').croppie({
        viewport: {
            width: 200,
            height: 200,
            type: 'square'
        },
        boundary: {
            width: 700,
            height: 300
        },
        enableZoom: false
    });

[GaganTiwari]

@Ashviniv Sorry to say but it doesn't work for me .

$uploadCrop = $('#upload-demo').croppie({
        viewport: {
            width: 200,
            height: 200,
            type: 'square'
        },
        boundary: {
            width: 700,
            height: 300
        },
        enableZoom: false
    });

can u plz give me any other suggestion i want to set zoom zero when upload an image. You can add you here in my site. http://www.askmedeveloper.com/ Thanks in advance.

[thedustinsmith]

To be honest, I have no idea what you're wanting to do, but I'm going to guess that you want to zoom all the way out of the image...

var $uploadCrop = $('#upload-demo').croppie({
        viewport: {
            width: 200,
            height: 200,
            type: 'square'
        },
        boundary: {
            width: 700,
            height: 300
        }
    });
$uploadCrop.croppie('bind', 'url').then(function(){ 
  $uploadCrop.croppie('setZoom', 0)
});

[Ashviniv]

@thedustinsmith Above solution didnot work for me ,instead the enableZoom : false is working for me. Can you please explain me the use of enableZoom option. Actually I have referred this from this line , where the initialZoom value is getting changed if the enableZoom is true.

But @GaganTiwari Can you please try this solution? that is

  $uploadCrop.croppie('bind', 'url').then(function(){ 
  $uploadCrop.croppie('setZoom', 0)
});

[Ashviniv]

@thedustinsmith sorry my mistake the documentation clearly mentioned that the enableZoom property is If set to false - scrolling and pinching would not zoom. enableZoom: false could not be the correct solution to set no zoom initially.

[thedustinsmith]

What do you mean when you say "no zoom"?

Do you mean you want the image at it's native size? Do you mean that you don't want the user to be able to zoom? Do you mean you want it to be as far zoomed out as possible?

[Ashviniv]

I mean, "No zoom" as in image at it's native size when someone uploads an image for cropping and should be able to zoom by himself. And I understood here the meaning of, enableZoom: false is Not allowing the user to zoom an image. Please correct me if I am wrong.

[thedustinsmith]

Your correct about enableZoom: false not allowing a user to zoom an image.

Try this:

$uploadCrop.croppie('bind', 'url').then(function(){ 
  $uploadCrop.croppie('setZoom', 1)
});

[GaganTiwari]

Sorry to say but i m to big stucked with this task . I m not able to set initial zoom zero for upload new image. @Ashviniv and @thedustinsmith Please help me otherwise, I ll break my laptop and left development as My client is also getting stressed with that task and he is not going ahead bcoz of this task.

Thanks in advance.

[thedustinsmith]

If you really want help - you're going to have to throw together a jsbin/jsfiddle/codepen demonstrating the issues that you're having and what you'd like to accomplish. Again, I still don't understand what the problem is.

[Ashviniv]

@thedustinsmith Got the issue why the below code was not working for me.

  $uploadCrop.croppie('bind', 'url').then(function(){ 
  $uploadCrop.croppie('setZoom', 1)
});

I was using old croppie.js file. Just replaced with the latest croppie.js. And it worked. I think, the same issue can be there with @GaganTiwari . I will suggest him to replace croppie.js with latest in master branch.

[kemanz]

If anyone still needs this, the following would be a solution:

var counter = 0;
jQuery('#element').croppie({
 update: function() {
  if(counter==0)
   jQuery('#element').croppie('setZoom', '0');
  counter++;
 }
});

[ssamlito]

Hello, am trying to upload a photo, according to the information sent to the database by a form, am getting the id through the input on the form, now passing the id to the other page using AJAX is not working, thus making it to fail to insert the image in the database in a different table....how can i pass the id to the next page....

//part of the code to get the id..

Select Image:

			<br/>

			<input type="file" id="upload">

            <input type='hidden' name='camid' value='<?php 



						if(isset($_SESSION['u_id'])){
							$uid = $_SESSION['u_id'];
							$campaign = mysqli_query($conn, "SELECT id FROM addfundraiser2 WHERE user_id='$uid' order by id DESC LIMIT 1");
							if(mysqli_num_rows($campaign) > 0){
								$row = mysqli_fetch_assoc($campaign);
								echo $row['id'];
				
					}
					
				}
			
		
			?>'/>

///code i am using to pass the id to the next page $('#upload').on('change', function () {

var reader = new FileReader();

reader.onload = function (e) {

	$uploadCrop.croppie('bind', {

		url: e.target.result

	}).then(function(){

		console.log('jQuery bind complete');

	});

	

}

reader.readAsDataURL(this.files[0]);

});

...can somebody please assist

[priyankafet]

Hi Guys, We have been facing issue with Croppie since months and now it is stuck with zoom.

Immediate help would be appreciated. When we upload the image then it automatically comes little zoom and if we try to fix it by setting zoom level or set min zoom level then the image gets distorted or stretched vertically.

[rulrich1]

in croppie.js find the line

defaultInitialZoom = Math.max((boundaryData.width / imgData.width), (boundaryData.height / imgData.height));

and replace it with

defaultInitialZoom = self.options.initialZoom ? self.options.initialZoom : Math.max((boundaryData.width / imgData.width), (boundaryData.height / imgData.height));

Now you got a new option initialZoom which you can set to any zoom factor or 1 for no zoom. If you don't pass this option, you will have the default behaviour (a little zoom at start).

[syosoft]

Modified it to accept a value of 0 as 1 was causing the same "little zoom" behavior.

defaultInitialZoom = !isNaN(parseInt(self.options.initialZoom)) ? self.options.initialZoom : Math.max((boundaryData.width / imgData.width), (boundaryData.height / imgData.height)); 

[csibern]

Hi guys,

I also encounter some problem with the initial zoom. I've 3 images on my page, the first one is in vanilla style in the main container. The second two are in jQuery style (it was easier for me to configure like this taking reference from the examples) in modals (bootstrap, followed tutorial from https://foliotek.github.io/Croppie/).

The image in the main container as a correct behaviour, the two in the modals started zoomed approximately at pixel level and if I want to use the mouse wheel,it direct zoom to the maximum. Do you have a way to pass through?

I didn't try to change the source code as the solutions proposed here are pretty old and I don't want to break your good work.

Thanks

[csibern]

I changed the modals images in Vanilla Style, and it don't change anything: $('#modal1').on('show.bs.modal', function (e) { img1.bind({ url: 'img/000060IMG_20200321_141439.jpg', zoom: 10 // tried 0, 0.1, 1 and 10 }); }); I also made the change recommanded by @rulrich1 but I don't know how to use it. I hoped @thedustinsmith or @Ashviniv could help me, it looks like they understand this problem.

P.S. If I slide the zoom-slider complete on the left, the image disapear, but short before, the image is still to big for my viewport.

[BinoyDarvin]

Hey, I did this and it has worked fine, pop = $('#croppie-container').croppie({ viewport: { width: 150, height: 150, type: 'circle' }, url: url });

    $('.cr-slider').one('change', function(){
        pop.croppie('setZoom', 0.2);            
    });