Uploading rotated and cropped image about ngcropper HOT 10 OPEN

The same happend to my. I rotate the image but when crop not appear rotate. Sorry my english

from ngcropper.

Same problem here. I read the code and it seems that the wrapper function Cropper.crop(file, data) do not handle rotate parameter in data. You should call getCanvasData using your proxy and then convert the canvas object you get to dataurl before uploading.

from ngcropper.

Thanks for your comment but how can convert canvas object to dataurl with the angular mudule.

from ngcropper.

The canvas object has the method called toDataUrl(), so you can write something like this:

$scope. dataUrl = $scope.cropper.first('getCroppedCanvas', {
    width:150, 
    height: 150}).toDataURL();

You can of course change the width/height there in my example code (150/150) as you wish.

from ngcropper.

thanks I'll try and tell you.

from ngcropper.

+1. Same issue with rotate — ngCropper just not rotates the image.

from ngcropper.

Is there any way to refresh the cropper or refresh the duplicated image cropper uses? (There are two images — original image, which is hidden with .cropper-hidden class and duplicated original image which is used by cropper.)

from ngcropper.

+1

from ngcropper.

This made the magic for me:

       this.crop = function (file, data) {
            var _decodeBlob = this.decode;
            return this.encode(file).then(_createImage).then(function (image) {
                var canvas = createCanvas(data);
                var context = canvas.getContext('2d');

                drawImage(context, image, canvas, data.rotate);

                var encoded = canvas.toDataURL(file.type);
                removeElement(canvas);

                return _decodeBlob(encoded);
            });
        };

        function drawImage(ctx, image, canvas ,degrees) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.save();
            ctx.translate(canvas.width / 2, canvas.height / 2);
            ctx.rotate(degrees * Math.PI / 180);
            ctx.drawImage(image, -image.width / 2, -image.width / 2);
            ctx.restore();
        }

from ngcropper.

@maurobilotti thanks your suggestion, but got the cropped image shifted down and out the boundary.

from ngcropper.