question: how to use the image from server side to start the cropping

[ericq]

Thanks for the work.

The current demo assumes user will upload the file from its local file system. How can I download an image from the server side and then crop it. Since I'm still new to Angular, can you help me find the way?

I.e., $scope.onFile = function (blob) {}; is used in the demo. but what if the original image is on the server already and I want to pass the image URL to the cropper.

[l0c0luke]

+1 for this

[coommark]

+1 here. I don't know. Cropper has a complete sample that demonstrates it. I wish there was a corresponding demo here such as the avatar cropper sample. Would have really helped. Please.

[faheyyy]

I was having this issue, I fixed it in a slightly unusual way because of CORS problems. I found this solution here http://jsfiddle.net/Jan_Miksovsky/yy7Zs/ This will create an additional http request but it's working for me

var imageToBlob = function(url, type) {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.responseType = "arraybuffer";
        xhr.onload = function(e) {
            var arrayBufferView = new Uint8Array(this.response);
            var blob = new Blob([arrayBufferView], {
                type: type
            });
            Cropper.encode((file = blob))
                .then(function(dataUrl) {
                    $scope.dataUrl = dataUrl;
                    $timeout(showCropper); // wait for $digest to set image's src
                });
            $timeout(showCropper);
        };
        xhr.send();
    };
    $scope.editImage = function(image) {
        var blob = imageToBlob(image.url, image.mimetype);
    };

[koorgoo]

To crop image on ther server side you must use other libraries. For example, first result in Google for "node js image crop" is node-easyimage. It requires ImageMagick installed.