Crop and Rotating Preloaded Image in Ionic

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

This is only Ionic plugin/directive close to what you need:

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

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.

@Gajotres Thank You so much :smile:

You’re welcome :smile:

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

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


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

                        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) {                                

// 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.

try using toBlob function instead of toDataURL

thanks for your help,

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

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); 
  function (entry) { 
    // success entry.fullPath for absolute path
  function (error) {
    // error


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!


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: