Getting the original image, and crop coordinates

[blackotruck]

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?

[standuprey]

Yes, you can easily do that by changing what the cropme:done event sends.

Fork the project and replace in cropme.coffee:

            destinationHeight = scope.destinationHeight || scope.destinationWidth * scope.croppedHeight / scope.croppedWidth
            ctx.drawImage imageEl, scope.xCropZone / zoom, scope.yCropZone / zoom, scope.croppedWidth, scope.croppedHeight, 0, 0, scope.destinationWidth, scope.destinationHeight
            canvasEl.toBlob (blob) ->
                $rootScope.$broadcast "cropme:done", blob
            , 'image/' + scope.type

by

            $rootScope.$broadcast "cropme:done",
                x: scope.xCropZone / zoom
                y: scope.yCropZone / zoom
                width: scope.croppedWidth
                height: scope.croppedHeight

Then run grunt and you should be good to go

[blackotruck]

Yeah i did that (on the js, not the coffe), and added an attribute to the scope so the return function could be the old one or thus new one. But i still cant access to the original input file, which is the one i want to send to the server. This is y form

<div class="modal-header bg-primary">
    <h3 class="modal-title">Edit Avatar</h3>
</div>
<div class="modal-body clearfix">
    <form name="forms.avatarForm" role="form" novalidate>
        <cropme
        width="320"
        height="180"
        ratio="1"
        icon-class=""
        type="png"
        destination-width="180"
        jcrop="true">
    </cropme>

    </form>
</div>
<div class="modal-footer margin-none">
    <button type="button" class="btn btn-primary" ng-click="saveAvatar()">Save</button>
    <button type="button" class="btn btn-default" ng-click="">Cancel</button>
</div>

Now i woud like to use the saveAvatar function to trigger the 'ok' event from cropme, and send the form to my server... any help on that?

[standuprey]

I'd try something like this (not tested):

    scope.ok = ($event) ->
        canvasEl.width = imageEl.width
        canvasEl.height = imageEl.height
        ctx.drawImage imageEl, 0, 0
        canvasEl.toBlob (blob) ->
            $rootScope.$broadcast "cropme:done",
                blob: blob
                x: scope.xCropZone / zoom
                y: scope.yCropZone / zoom
                width: scope.croppedWidth
                height: scope.croppedHeight
        , 'image/' + scope.type

[blackotruck]

Actually what i did was add that $bradcast

$input.bind("change", function() {
          var file;
          file = this.files[0];
          $rootScope.$broadcast("cropme:fileLoaded", file)
          return scope.$apply(function() {
            return scope.setFiles(file);
          });
        });

Cause like i said i want to upload the original file, not the cropped img, and because i'm using Danial Farid angular-upload module. and everything is working now. And thanks anyway for the help, maybe you could add these features later, i think they could be useful, at least they were for me hehe

[standuprey]

The code I put in my last comment together with the description on how to upload to the server on the readme.md file should allow you to upload the original file without any other dependency. But I'm glad you could do what you wanted.

I am not sure why you would resize on the server? resizing on the client makes the upload lighter/faster? If there is a good reason, I might add the option

[blackotruck]

Yeah, this is just a different paradigm, like i've been saying the original image is saved so we can see the whole image, pretty much like when you open a facebook avatar. Of course, there is a paradigm where when you crop, that's it, that's the image saved, this is like Instagram, where the image must be square (or any specific dimension). So it depends on wich paradigm is implemented.

On the other hand, i needed tha File object so i can uploaded with the $upload service, i tried to use with the blob, but didn't work out.

Oh also, i would recommend to separate the directive template, or make it so there is a easy way to set classes to the "cacel" "ok" buttons, mainly beacuse i don't think we shoul temper with the directive directly (wich i had to), and in the case it is needed a separate template is easier to change/fix

Anyway, this crop directive is awesome!

[standuprey]

this makes a lot of sense.

[standuprey]

I added that to version 0.2.2, look at the readme file