scottcheng / cropit Goto Github PK

[removed]iVBORw0KGgoAAAANSUhEUgAABJAAAAEqCAYAAABKuaqdAAAgAElEQVR4nNTdV3vjOLY27OmyJGaCBMAkKgd

Hello !

First of all, thanks for providing and maintaining this lib.
Out of curiosity, on mobile devices, is it possible to pinch to zoom instead of using the slider ?

Thanks!

I am loving your design of this very common task. What you have created is very elegant.

Do you have any plans to support Safari on IOS? I have done some limited testing and it doesn't seem to support touch events. Uploading works fine, display works well, but the slider doesn't change the image and dragging a finger across the image doesn't move it.

How to use functions such as onImageLoaded in cropit.

I want to execute custom code inside it.

thanks.

When an image is selected from local directory the zoom slider gets disabled.

First I want to say what a wonderfull plugin cropit is, my compliments.

When the preview container size is changed after instantiation, the export function uses the old dimensions to create the export image. Does somebody know if there is a solution available for this?

Kind regards

Hello, awesome library and thanks for this!

Anyway, I don't know if I'm doing this the wrong way, but I have a use-case of executing certain tasks after a user have selected a file using the onImageLoaded method (I need the image for executing the tasks but before it being exported, hence after the image is fully ready).

The first time, it's all runs well. The user will have a choice to proceed (I then export the selected image) or cancel everything.

The issue is that, when user decides to cancel, and then repeat the process with the same file previously, the callback of onImageLoaded is not called and I can't execute my task. This is when using webkit browsers (chrome/safari) but not in firefox.

I work around this by adding onImageLoaded as a method to the cropit object and calls it manually when detecting the user is on webkit browser. Doing this in onFileChange or onImageLoading, I will still need to detect if the image is already loaded, which is the responsibility of onImageLoaded anyway. I figured webkit already 'loads' the image if choosing the same file consecutively hence the onload event is not called.

Am I doing this right or am I missing something obvious or completely doing it the wrong way? Thanks!

I am not able to understand how do I get image details in php page and save it in folder.

Hi,
I have this code.

$('#image-cropper').on('change', function () {
var value = valueAccessor();
var image = $('#image-cropper').cropit('export', {
type: 'image/jpeg',
quality: .9,
originalSize: false
});
value(image);
});

It detects change when I use the zoom slider but not when I reposition the image inside the frame by dragging using the mouse. Any suggestions?

If image loaded is from another domain then browser doesn't allow to get data. Is it possible for you to include some kind of workaround for this? (http://blog.codepen.io/2013/10/08/cross-domain-images-tainted-canvas/).

Besides that - great work!

Add API to programmatically set image source.

You can reproduce in the basic demo. As soon as an image is selected, the slider is disabled.

Nice plugin.. Just what i was looking for

Any thoughts @scottcheng

Excuse me if this sound stupid but
In a PHP I have a form with a file selector. Image is loaded and can be changed in the cropit canvas. Once done, If I submit the form, the uploaded file is the original, not the one manipulated by cropit.

My question is: how to submit the contents of the cropit canvas instead of the original image when the form is submitted?

Hi all!
I want when selecting the image you can rotate the image. The thing that I have done but when cutting the image then it is not true to picture when rotated. So how? Many thanks!

How do I access the cropped image - the final result after cropping? I need a way to get it so I can send this to the server to be saved. Think profile pictures.

Hi I'm using this for a banner upload but the size is too small, how can I send my server the original size, I could not see how I can do this, the code I have it:

$('#image-cropper-banner').cropit({
    imageBackground: true,
    imageBackgroundBorderWidth: 50,
    export: {
        quality: .9,
        originalSize: true
    },
    imageState: {
        src: 'img/select-image.jpg'
    },
    onFileChange: function(){
        $('.apply-banner-action').removeAttr('disabled');
    }
});

I need images to be a certain size (or larger). Right now, I've noticed that smaller images are upscaled to fit the preview area. Is there a way to turn this off and require a minimum size?

Thanks

Another functionality that we've added additionally was drag&drop support.

Hope someone finds it usefull...

variable imageCropper is defined as:

var imageCropper = $('#image-cropper');
imageCropper.cropit( { imageBackground: true; }) 

This is the way we've done d&d. If user selects multiple files (tries to upload multiple files) the first image file will be loaded into the cropit using: imageCropper.cropit('imageSrc', e.target.result);

if (window.File && window.FileList && window.FileReader) {
                    var filedrag = imageCropper.find(".cropit-image-preview");


                    // is XHR2 available?
                    var xhr = new XMLHttpRequest();
                    if (xhr.upload) {

                        var dropZone = document.getElementById('#{$tuniq}-image-preview');

                        function dragover(evt){
                            evt.stopPropagation();
                            evt.preventDefault();
                            evt.dataTransfer.dropEffect = 'copy';
                            $(evt.target).toggleClass('dagoverhoover', evt.type == 'dragover');
                        }

                        dropZone.addEventListener('dragover', function(evt){ dragover(evt); }, false);

                        dropZone.addEventListener('dragleave', function(evt){ dragover(evt); }, false);

                        dropZone.addEventListener('drop', function(evt){
                            evt.stopPropagation();
                            evt.preventDefault();

                            $(evt.target).removeClass('dagoverhoover');
                            var files = evt.dataTransfer.files; // FileList object.

                            for (var i = 0, f; f = files[i]; i++) {
                                // Loads first image file
                                if (f.type.match('image.*')) {
                                        var reader = new FileReader();
                                        reader.onload = (function(theFile) {
                                            return function (e) {
                                                imageCropper.cropit('imageSrc', e.target.result);
                                            };
                                        })(f);
                                        reader.readAsDataURL(f);

                                    break;
                                }
                            }

                        }, false);
                    }
                }

In Firefox (37), you cannot upload an image when the allowCrossOrigin flag is set to true. The image will fail to load (it will end up in the onImageError function). No problems on Chrome or IE, but similar issue on Mac Safari (8.0.4).

Recently, I had to incorporate a crop tool in one of our apps, looked through a few and chose cropit. It has been working fantastic since. Thank you!

BTW our UX was of the opinion that I should add a '-' and '+' buttons on either side of the slider (Like you have on home page) or else it may not be intuitive to the user. I did that outside of the plugin, but now that I think about it, it is possible to incorporate it back to the plugin. I could work on a PR and get it out fairly easily. Do you think you would be interested?

Hi all

I'm validating the chosen file using the onFileChange event, but I can't see how to prevent cropping if the file doesn't pass the validation -- returning false makes no difference.

Alternatively, I can validate the file and when it passes fire the $(img).cropit() function, but the image in .cropit-image-preview isn't properly updated.

Any help much appreciated, this is an amazing piece of software :)

Get cropit to work with browserify.

Could be as easy as adding a "main": "dist/jquery.cropit.js" in package.json. Needs a little more investigation.

I'm using your cropper as part of form in which user upload the image. Now I'm doing workaround so that when form is submitted the data is retrieved using the getData. Is it possible to define listener function so that my function would be triggered after the image is zoomed or moved (repositioned/cropped)?

I'm using the imageBackground functionality to show a larger area of the photo than the region I will crop. I would love it if the image would center itself within the croppable region when it loads in (if a tall image, it would center vertically; if a wide image, it would center horizontally). I assume I could hack it on my own using setOffset, but I figured this would be a nice addition to the library.

Let me know if it already exists and I've missed it somehow.

Sorry to find this, but in WIn7 Fx 35.0a2 (2014-10-18), a few demos will not stay normal when zooming. Fx24 (PaleMoon fork) & Chrome Beta don't have this issue:

I hope I did not break something? :^)

The images uploaded are initially left aligned with offset (0,0). I want to center align images set using 'imageState' property and uploaded by users initially. In your demo site, its already implemented like that. The only way i found so far is by calling 'offset' property and don't think its the right way. I'm sure that I'm missing something very simple.

I have my image preview set to 300 x 174 because that is the dimensions of the image I want exported. Now for some pictures, 174px is too short and cuts off part of the desired part of the image. Is it possible to zoom out further and just add white padding to the left and right?

Hi,

I'd like to use cropit together with a thumbor server (https://github.com/thumbor/thumbor/wiki/Usage).
For that i need to construct an url like this:

http://thumborserver.com/unsafe/[X1COORD]x[Y1COORD]:[X2COORD]x[Y2COORD]/[TARGET WITH]x[TARGET HEIGHT]/http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg

So for this i need to know the actual crop-coordinates on the fullsized image.

I'm having trouble figuring this out, can you help me?

Help is much appreciated!

Thanks,
Ben

How to save the file to local server. Instead of viewing in new window.

Is there any way such that we can crop image of circular shape ?

Right now we specify the width and height of the div containing this CSS class("cropit-image-preview").

If i provide a property of border-radius:50% then the shape of the div changes to circular but the image I get after croping is rectangular in shape.

Issue with how the zoom scroll appears in IE11. Works fine in FF and Chrome.

We were using this idea for showing the whole background image (in transparent) only when user is hovering over the image.

If you find it helpful you can include it maybe? We've added this as another script but it may probably be useful as one more option in your great library?

It just hides cropit-image-background when user is not hovering over cropit-image-previw and show is when the user is hovering. Since divs cropit-image-preview and cropit-image-background are not parent/child we haven't been able to do it using just CSS :)

$('.cropit-image-preview')
     .mouseover(function(){ 
              $(this)
              .closest('.image-cropper')
             .find('.cropit-image-background')
                .css('opacity', '0.2');
      })
     .mouseout(function(){ 
              $(this)
                  .closest('.image-cropper')
                  .find('.cropit-image-background')
                  .css('opacity', '0'); 
       });

Hi i have some problem use two imageformat to upload: jpg and png ...
Im trying jpg and png

The orginal code is:
var imageData = $('image-editor').cropit('export', {type: 'image/jpeg' quality: .9,} );

i would like to use both format in same code: how do i do that???

example ? can the script know what image to upload? jpeg or png?
The upload does not work for two format??

IF JPG do this:
var imageData = $('image-editor').cropit('export', {type: 'image/jpeg'´ quality: .75,} );
IF PNG do this:
var imageData = $('image-editor').cropit('export', {type: 'image/png'´ quality: .9,} );

something like this i want..

/ Best regards

Kamal Ahmad

As we understood currently maximum zoom level is "100%" (original image size).

Is it possible that the maximal allowed zoom level would be greater than 100% (e.g. 200% or even 500%)?
That way user can crop just a small fragment even if the source image is exactly the size of "required image" or smaller that required size.

Currently if the user uploads image that is smaller than requested size, zoom options are disabled and the picture is resized so that it fits requirements (what is great), but the user can move (crop) required part (but not zoom it further).

I understand that the picture would be resampled in browser and that it wouldn't look as good thats why it would be good if it is possible to be added as an option (that picture would be useful to us even when resampled from lower resolution).

Question close. Sorry it`s cracket PNG.

Hi

Just wanted to check whether this already exists before I jump into code :)

It would be nice to be able to optionally hide the zoom control if the uploaded image is too small to be zoomed - I'm working on a site with large user contributed images which often end up being upscaled, and the presence of the unusable zoom control is quite confusing for users...

Cheers

It would be interesting if the plugin allow to edit an image with a different proportion of the container.

For example, I want the user to upload an square picture, but him uploads a rectangular one. The current implementation doesn't allow to fit the image on the container, cropping the image. Without that limitation, the user would move and zoom the image until it fits the container, and then save it. What do you think?

I want to crop the picture to my website Responsive Design. If it runs on smartphones images will be scaled down. The percentages are different. How can I cut it exactly.

Hello,

Is there an opinion that the cropped image will be upload to a special folder on the server?

Thank you very much!

Greetings

I adapted some code into your plugin so that the resulting image is of a better quality, with a lot less aliasing and without using too many resources. I was going to send you a pull request but then I realized the source code was written in coffee script. I wrote the new code in JavaScript and inserted it in the generated .js file. Are you interested in said code? What's the best way to share it?

http://stackoverflow.com/questions/28911351/how-to-minimize-requested-image-using-jquery-cropit-plugin

Hey,

just found out: when moving the image and leaving the preview area while draging the image stops moving.
Better behavior would be move the image until the user releases the mouse button.

tentei utilizar a função export para enviar a imagem para o src de uma e o crohme retorna o seguinte erro: Uncaught TypeError: Cannot read property 'w' of undefined jquery.cropit.min.js:10.

estou carregando os 2 javascripts e o plugin já está até funcionando, porém não consigo exportar a imagem recortada.

$('#img_hid').src=$('#editor1').cropit('export', {
type: 'image/jpeg',
quality: .9,
originalSize: true
});

Just had the idea to enable the mousewheel for zooming the image insteat or in addition to the slider. What do you thing is this a good idea or would it confuse the users?

I'm building a page where our customer could upload a companylogo and would like to use cropit. In fact that there is only one image to be uploaded and saved i'd like to use the cropit-pane for the image rendering. Now after the user uploaded an image, changed zoom and position he has to klick a save button. That causes ann ajax call saving the image and i like to disable cropit until the user uploads an different image.
Is there an easy way for doing this? Actually my code look way ugly disabling and removing/hiding all elements that are used by cropit...

I am using codeigniter framework.
When I get imageData from cropit('imageSrc'), I am passing it to my codeigniter controller function, after that in response I am getting something like that,

Array
(
    [image] => [removed]/9j/4AAQSkZJRgABAQEASABIAAD/4QAWRXhpZgAASUkqAAgAAAAAAAAAAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQECAgICAgICAgICAgMDAwMDAwMDAwP/2wBDAQEBAQEBAQIBAQICAgECAgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwP/wAARCASwB4ADAREAAhEBAxEB/8QAHgAAAgIDAQEBAQAAAAAAAAAAAwQCBQABBgcICQr/xAByEAABAwIEAwYDBgMFBQMBATEBAgMRACEEEjFBBVFhBhMicYGRMqGxBxRCwdHwI1LhCBVicvEkM0OCkgkWU6KyJTTCFzVjc4PSJjdFk7PT4hg2RFR0d5S0tidGR1V1doSVo6TD1FZXZGVmhpa1xNXj8v/EAB4BAQACAwEBAQEBAAAAAAAAAAACAwEEBQYHCAkK/8QAchEAAgECBAMEBwUFBAUFBwInAAECAxEEEiExBUFRBiJhcRMygZGh0fAHFEKxwQgjUmLhFTNy8SSCkqKyFjRDwtIJJURTY7S1Fxg1c3R2g4Wzw8TUN0ZUVVZ1hJOUo6Xi4

That  [removed] thing is showing, and because of that I am not able to save image in directory.
Can anyone suggest me why this is happening?

If you try to unload an image and leave the control in its initial state using this method, cropit ends up in an indeterminated state:

$element.cropit('imageSrc', null);

When zooming an image, zooming relative to the center of the preview area, rather than the center of the image.

Hi,
I would use Cropit in a script in classic Asp and I have the need to submit the contents of the cropit canvas instead of the original image when the form is submitted.
I can't do it as the example reported in the issue #3, I think because the asp component that handles the upload, considers only the fields of type "file" and not "hidden" fields, as proposed in the issue #3.
Can I change the content of fields of "file" type? Is there any other solution?
Thank you.