Crop and Rotating Preloaded Image in Ionic

ionic-v1
1

Hi,
I am doing an ionic app in that i need to crop and rotate the preloaded images. Help me with some solutions.

2

This is only Ionic plugin/directive close to what you need: https://github.com/JrSchild/jr-crop

3

Thanks @Gajotres . I am already using this plugin. How to rotate images by using this plugin?

4

You can’t do that with this plugin.

But you can use some kind of post processing and rotate this image after you crop it. Just google a JavaScript solution for image rotation.

5

@Gajotres Thank You so much :smile:

6

You’re welcome :smile:

7

draw image on a canvas (if it is not already) and then rotate

8

Please help, how to save canvas.toDataURL(),

mycode:

ImageService.getImage(1).then(function (images) {
for (var i = 0; i < images.length; i++) {

                    //Crop                        
                    $jrCrop.crop({
                        url: images[i],
                        width: 200,
                        height: 200,
                        title: 'Move and Scale'
                    }).then(function(canvas) {
                        // success!
                        $scope.userProfile.avatar = canvas.toDataURL("image/jpeg");
                        var img = canvas.toDataURL("image/jpeg"),
                            data = img.replace(/^data:image\/\w+;base64,/, ""),
                            decode = base64.decode(data),
                            params = {
                                fileType: 1,
                                fileName: 'ImageCrop.jpg',
                                destPath: 1
                            }
                        FileService.createFile(params, decode).then(function      (result) {                                
                            console.log(result.nativeURL)

// save file success, but file can not open/ corupt.
// please let me know what wrong with my code…thanks…
})

                    }, function() {
                        // User canceled or couldn't load image.
                    });
                }
            })
9

try using toBlob function instead of toDataURL

10

thanks for your help,

But it’s not working, not supported by browser…and canvas.toDataURL() is a default response from jr-crop plugin ( https://github.com/JrSchild/jr-crop), so i have to play with it…/ save this canvas.toDataURL()/ cropped image to disk

11

okay then try the following

get the image source:

var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");

use cordova-plugin-file-transfer to download the file

var fileTransfer = new FileTransfer(); 
var uri = encodeURI(image); 

fileTransfer.download( 
  uri, 
  "/DESTINATION.png", 
  function (entry) { 
    // success entry.fullPath for absolute path
  },
  function (error) {
    // error
  }
});
12

Hello!

I’m struggling with a related problem when I’m doing the canvas.toDataURL() step, I’m getting the following error:

Error: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported.

Could you please help me, I don’t know how to overcome it. There are solutions out there that propose doing the following:

var image = new Image();
image.setAttribute('crossOrigin', 'anonymous');
image.src = url;

But I’m deeply confused because I have no idea how’s this related to the canvas object (or to the plugin for that matter)? -Am I to understand that the idea here is to create an Image Object like that one and pass it to the plugin? (because that won’t work).

I hope you guys can help me out with this one!
Regards,

-J

13

Hi, i had the same problem with canvas.toDataURL and a friend just help me with this.

i had the meta tag inside my index

and we add this inside the meta

img-src * ‘self’ data:;

the final meta is: