standuprey / cropme Goto Github PK

Please add element id in events (:loaded, :done).

If I set send-original, I'm able to receive the original image blob from originalImage variable.

However, upon uploading to the server via API with base64, it seems the original image seems to be resized and cropped based on the "width" parameter set instead of the full original image.

Here's the HTML that I'm using:

Note that this one is different from #30

Is it possible to disable the resize window to make it fixed ? I want that the user should only be able to upload the image and move the resize box around to choose the image part he wants BUT not be able to change the size of resize box at all.

Because resize the image causes a drop in image quality.

Thanks

I would like to somehow highlight the corners while cropping to make clear that you can drag the corners and that the size is not fixed.
I tried it using pure css but since the HTML code is quite fixed I was not able to add an attribute which would just highlight the corners.
Does anyone have already such a change to the code?
If so I would appreciate some sample code for this.

Hey @standup75 ,

Love this project you've been working on. Just a small reminder: You didn't add angular-route to the dependencies on bower.json, so when running the demo from localhost, the demo breaks because it's missing angular-route. Hope you can fix it soon so other people don't have the same issue.

Best regards,

Leo

Any thoughts on how to make the directive responsive? Tried to style using
.step-1,.step-2, cropme, cropme canvas{

position: relative !important;
height: 100% !important;
width: 100% !important;

}
and took away height and width from the directive but it wont budge... Any advice?

After installing ruby+compass as instructed and running grunt server, opens a blank page with the following errors in console:

GET http://localhost:9000/cropme.js 404 (Not Found) localhost/:35
Uncaught Error: [$injector:modulerr] Failed to instantiate module cropmeDemo due to:
Error: [$injector:modulerr] Failed to instantiate module cropme due to:
Error: [$injector:nomod] Module 'cropme' is not available! You either misspelled the module name or forgot to load it.
If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.1/$injector/nomod?p0=cropme
    at http://localhost:9000/components/angular/angular.js:78:12
    at http://localhost:9000/components/angular/angular.js:1505:17
    at ensure (http://localhost:9000/components/angular/angular.js:1435:38)
    at module (http://localhost:9000/components/angular/angular.js:1503:14)
    at http://localhost:9000/components/angular/angular.js:3527:22
    at Array.forEach (native)
    at forEach (http://localhost:9000/components/angular/angular.js:300:11)
    at loadModules (http://localhost:9000/components/angular/angular.js:3521:5)
    at http://localhost:9000/components/angular/angular.js:3528:40
    at Array.forEach (native)
http://errors.angularjs.org/1.2.1/$injector/modulerr?p0=cropme&p1=Error%3A%…ngular%2Fangular.js%3A3528%3A40%0A%20%20%20%20at%20Array.forEach%20(native)
    at http://localhost:9000/components/angular/angular.js:78:12
    at http://localhost:9000/components/angular/angular.js:3555:15
    at Array.forEach (native)
    at forEach (http://localhost:9000/components/angular/angular.js:300:11)
    at loadModules (http://localhost:9000/components/angular/angular.js:3521:5)
    at http://localhost:9000/components/angular/angular.js:3528:40
    at Array.forEach (native)
    at forEach (http://localhost:9000/components/angular/angular.js:300:11)
    at loadModules (http://localhost:9000/components/angular/angular.js:3521:5)
    at createInjector (http://localhost:9000/components/angular/angular.js:3461:11)
http://errors.angularjs.org/1.2.1/$injector/modulerr?p0=cropmeDemo&p1=Error…p%3A%2F%2Flocalhost%3A9000%2Fcomponents%2Fangular%2Fangular.js%3A3461%3A11) angular.js:78

Ubuntu 13.10, Chrome 32.0.1700.102, ruby 1.9.3p194.

No obvious errors as grunt is starting up:

Running "clean:server" (clean) task
Cleaning ".tmp"...OK

Running "coffee:dist" (coffee) task
File .tmp/src/scripts/cropme.js created.

Running "coffee:demo" (coffee) task
File .tmp/demo/scripts/app.js created.
File .tmp/demo/scripts/controllers/main.js created.

Running "coffee:test" (coffee) task

Running "compass:server" (compass) task
directory .tmp/styles/ 
   create .tmp/styles/cropme.css 

Running "livereload-start" task
... Starting Livereload server on 35729 ...

Running "connect:livereload" (connect) task
Starting connect web server on localhost:9000.

Running "open:server" (open) task

Running "watch" task
Watching src/{,*/}*.coffee
Watching demo/scripts/{,*/}*.coffee
Watching test/spec/{,*/}*.coffee
Watching styles/{,*/}*.{scss,sass}
Watching .tmp/**/*.js,.tmp/styles/{,*/}*.css,src/{,*/}*.html,demo/styles/{,*/}*.css,demo/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}

I have used cropme for cropping image and used this for uploading image into server using sails.js.

But file type is missing after cropping image.How to fix this issue.

Welcome any kind of help.

How to get multiple cropme work on one project. I tried using multiple controllers but the events are at root scope and listened by every scope. How to find out which cropme element raised the event ?

Thanks

cropme support png only by default, Can I make it support png,jpg,gif through by config

I'd suggest appending a 'cm' or 'crop' to the beginning of all css classes used by the plugin so it doesn't interfere with class names that may already be in use.

Then the css file for the site can be put in the head of the main html file.

I'm using Cropme to crop and post image but not getting anything on server side. I'm using PHP on server side. Just printing $_POST['any variable'], but not working

I think the way I'm posting data could be wrong. Any idea?? Thanks in advance.

$scope.$on('cropme:done', function(ev, result, cropmeEl){
                    var postProfileImage = {
                        request: 'profile_update',
                        profile_type: 'upload_profile_image',
                        user_id: window.userId,
                        image: result.croppedImage,
                        image_ext: result.croppedImage.type 
                    };
                    console.log(result.croppedImage);
                    $http.post( window.url + '/rest-api/web', postProfileImage).then(function(response){ console.log(response); }, function(){});
});

Trying to use cropme directive to integrate into content area of an Ionic framework app. The touch events are not firing at all when trying to resize crop area.

look at demo - register and go to edit profile to view the demo- Once in your profile you can click on the img icon on the top left to see your directive in action.
http://shielded-hamlet-4180.herokuapp.com/

I have a problem with "select" box:

http://storage4.static.itmages.com/i/15/0331/s_1427811905_3076036_336d561df9.png

This code is a problem:

If I change it to:

All works good. Could you please help me?

Thanks

Hi,

if i load a file, then click cancel, and then again try to reload the same image file, nothing happens, because "imageEl.onload" never gets executed.

One simple solution would be to just show step-2 when files are the same.

// cropme.js
...
100 reader = new FileReader;
101 reader.onload = function(e) {
102
103     if (scope.imgSrc === e.target.result) { 
104            scope.state = "step-2";
105     }
106
105     imageEl.onload = function() {
...

What browsers are supported?
I need IE9+ too.

Thanks

how i get cropped image as base64 after crope done event call.
i havd no idea how i get it and save it. give me solution please.

I've got my img url stored iin my $scope and it can change but the cropme DOM does not update
eg:

html:
<cropme
....
src={{myChangingURL}}
....

js:
$scope.myChangingURL = "img/myimage1.jpg";
then later on I change it to:
$scope.myChangingURL = "img/myimage2.jpg";

this won't work :(

Any ideas would be great! And thanks for all the hard work.

I think cursor should be :

• the "move" cursor when roll-over the center of the area to move the crop area
• "sw-resize" when resize on the sw corner
• "se-resize" when resize on the se corner
• "pointer" when cursor is outside

Don't you think ?

Tx. And btw, tx for your great tool !

Hi,

I've noticed that when you put the cropme directive in any kind of element that has a float, position or something else of CSS positioning stuff, dragging for the crop area isn't working.

You can still move around the crop area, but you can't for example resize it. This is kind of a big bummer. Are there plans to fix this soon? We're thinking of using it in our large scale project.

Thanks!

Hey again, sometimes but not always I get this error message while adding an image to the dropbox:

TypeError: Cannot read property 'left' of null
at isNearBorders (http://0.0.0.0:9000/bower_components/cropme/cropme.js:251:41)
at http://0.0.0.0:9000/bower_components/cropme/cropme.js:322:21
at Scope.scope.mousemove (http://0.0.0.0:9000/bower_components/cropme/cropme.js:336:13)
at http://0.0.0.0:9000/bower_components/angular/angular.js:10836:21
at http://0.0.0.0:9000/bower_components/angular/angular.js:19094:17
at Scope.$eval (http://0.0.0.0:9000/bower_components/angular/angular.js:12673:28)
at Scope.$apply (http://0.0.0.0:9000/bower_components/angular/angular.js:12771:23)
at HTMLDivElement. (http://0.0.0.0:9000/bower_components/angular/angular.js:19093:21)
at HTMLDivElement.jQuery.event.dispatch (http://0.0.0.0:9000/bower_components/jquery/jquery.js:5095:9)
at HTMLDivElement.elemData.handle (http://0.0.0.0:9000/bower_components/jquery/jquery.js:4766:46)

Any ideas?
Cheers,
Daniel

When you are dragging the croparea around and you move outside of the dropbox area with your cursor and then go back in it doesn't move the croparea to the current mouse location. Idea's?

Greetings, as usual i start by saying what an awesome module!!

Now, i'm having a big issue with the way it works, the thing is that i want the cropping to be done on back-end, so i can still have a copy of the original image. Is there any way to get the original image and the coordinates of the corpping square, so i can work like one would do with jcrop?

Currently, there is no way of selecting an image to crop without first having the user upload one.

A use case would be a carousel of images that the user can select from. The user could select an image, and have the img source become the selected image and begin the cropping process.

Hey guys.

It's just

        return scope.$watch("src", function() {
          var delimit;
          if (scope.src) {
            scope.filename = scope.src;
            delimit = scope.src.match(/\?/) ? "&" : "?";

            // HERE:
            if (scope.src.substr(0, 10) === 'data:image') {
                return loadImage(scope.src, true);
            }
            return loadImage("" + scope.src + delimit + "crossOrigin");
          }
        });

Hi.

I installed everything, got it working and was testing the example code provided in the readme to send it to a server. It seems that having xhr.open the line above xhr.send causes the script to fail as it needs to be much higher up the order.

Also, I wanted to ask, if I console.log the blob in cropme:done I get back size and type values but no data of the image itself. I feel like if I can't see it there, it's not there, which means it wouldn't be sending the data I need. Could you shed some light on this?

Cheers! Thanks for sharing this great script.

Is there a way to change the text of buttons "Ok" | "Cancel" without jumping into the code ?

I want them to change from this

to this

Greettings, it's me again... Well, the other time i overwrite the template code to get bootstrap style buttons. Now, i don't want to mess with the code this time, but at the same time i want to be able to use a ui.bootstrap modal. The thing is, in the modal i put the buttons on the modal-footer, while hidding the original directive buttons... Now, how do i trigger the ok/cancel actions from the original buttons?

Looks like the demo site has been suspended. It redirects to: http://standupweb.net/cgi-sys/suspendedpage.cgi

The website you were trying to reach is temporarily unavailable.

Line 86:

scope.ratio = destinationHeight / destinationWidth;

Is causing ReferenceError: destinationHeight or destinationHeight is not defined

It should fixed by adding scope:

scope.ratio = scope.destinationHeight / scope.destinationWidth;

Is there any option to set/modify image type dynamically as per image type
I require to upload gif [though cropper shows a gif in preview] but cropped image is of type png

Hey, good job. But I can't use custom templates without using fork. I need template with labels on Russian language. Think about it in next release.

Hi.

I need to limit uploading images of low resolution. Here is my code:
$scope.$on('cropme:loaded', function(e, width, height) { if (width < 1600 || height < 1200) { $scope.$broadcast("cropme:cancel"); } });

It works fine with different images. However, if I try to upload the same image twice, it works just once. The second time I try to upload the same image, it is actually uploaded.
This happens because the scope.imgSrc parameter remains the same.

Also, there is a typo in the documentation:

Hi there,
pretty cool plugin that you've developed here. I installed the plugin via bower and had no trouble. But the drag and drop feature does not really work. it keeps the "loading" screen forever. If I select a file form the file chooser everyhtings works flawlessly. Sorry but I don't have any error messages to show you :(

I'm on chrome 38.0.2125.104 and angular 1.2.23

If thats a problem is there any way to disable the drag and drop?
Cheers,
Daniel

I'm having white spaces between the overlay-tiles when i'm cropping large .PNG files. I'm using Chrome 35.0.1916.153 and do not have my browser zoomed in.

Any ideas how to solve this?

The documentation says that the width attribute is optional, however, if you leave this off, while it does set the image to fit the page, nothing else works, you don't get a bounding box, so all the sizings inside the progess event are all NaN

I tried to get the cropping done but I was not able to find the filename in both originalImage and cropImage. The name was set to canvas.

Is there a way to get the image name as well ?

Is there a API right now to check the file size on upload ?

Regards

Hi

Do we have image preview option while cropping??

If you have a long page and the component is placed down the page:

• When you single click somewhere on the image the cropping area is not centered on the mouse position - quick workaround here: snez@9d0c1a0
• Resizing the image may be triggered when you click on a non-border location inside the image
• Resizing may sometimes lock in but at the same time it will drag the background image along with the borders

Would prefer to specify a version rather than a repo so the api doesn't change underneath me without me knowing...

On firefox browser, i fix src It work well, but i browser file image -> error appear " Unsupported type of image"?

I have tested the script on localhost and our development server. I keep getting the following error when trying to send the blob:

Error: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
at Error (native)
at http://local:8000/assets/javascripts/cropme/cropme.js:565:24
at link.getCropPromise (http://local:8000/assets/javascripts/cropme/cropme.js:299:13)
at k.link.scope.ok (http://local:8000/assets/javascripts/cropme/cropme.js:377:26)
at eb.functionCall (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js:197:502)
at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.12/angular-touch.min.js:12:197
at k.$get.k.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js:125:305)
at k.$get.k.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js:126:6)
at HTMLButtonElement. (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.12/angular-touch.min.js:12:179)
at HTMLButtonElement.c (http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js:32:285)

This seems to come from this line in cropme.js:

dataURI = canvas.toDataURL(type);

What causes this?

src="components/cropme/cropme.css"

Should be inside a link tag

How can I send the croped image to a php file to save it? Wich blob data I must send?

When I click the demo link, it gives the following:

404 Not Found

Code: NoSuchKey
Message: The specified key does not exist.
Key: cropmedemo
RequestId: 4E1B693D90C09394
HostId: LvdWqC+U+HdB+fTvheFFmb6Za9EN2PIYO3yVCc2KDxsE8AqFFBHlh7ezTzF4hSV2t4IQRBcwICg=

Hello,

is it possible to have instagram style cropping? Like you move / scale only the image and the cropping are is fixed

Is it possible to disallow resize of the crop area ?
I can send this in as a pull request if it is already not present or you guys are not working on it.

Thanks

I am trying to upload Croped Image On server but i got blank object of croppedImage on server , which is best way to upload crop file on server

$scope.$on("cropme:done", function(e, result, canvasEl) {
console.log(result["croppedImage"]);
$http.post(url, {'file': result["croppedImage"]})
.success(function(response){

        })
       .error(function(responseg){

       });

 });