6

I've come across a few questions here that gave me some hints for a problem I'm currently having, but none seems to actually fit the bill.

I'm currently working with an angular module, ngCropper (https://github.com/koorgoo/ngCropper) which easily deals with images coming from a file input, but I need it to work also with external URLs. In order to work with external URLs I used the suggestion gave by faheyyy (https://github.com/koorgoo/ngCropper/issues/3) but now I'm dealing with CORS issues and there's no way I can do server changes.

So, I was thinking of loading an image on a hidden HTML element and somehow pick up that data, encode it as Base64 and then I'd be able to use it on the cropper module without needing to create a new GET request (which will create the CORS problem). I've also tried creating a directive that reads the source of an image (the directive is inserted on the img element) and tries putting it on a canvas element, and there gets the dataURL:

.directive('toBase64', function ($document) {
    return {
        restrict : 'A',
        link : function (scope, element, attr) {

          element.on('load', function () {
            getBase64Image(element);
          });

          function getBase64Image(element) {
            var theImage = new Image();
            theImage.src = element.attr("src");
            var imageWidth = theImage.width;
            var imageHeight = theImage.height;

            var canvas = element.siblings('#cropCanvas');
            canvas.width = imageWidth;
            canvas.height = imageHeight;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(element, 0, 0);
            var dataURL = canvas.toDataURL("image/png");
            return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
          }
        }
    };
});

The directive is still in works, but I'm running into problems with the canvas.getContext("2d") line (it throws undefined).

So far, the threads/answers I found here already deal with the image src being passed as Base64, but I also need it to be working with URLs, and I can't move past this. Could someone, please point me into the right direction? Thank you

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
NunoM
  • 293
  • 3
  • 17
  • You should use : element.find('#cropCanvas'). It seems element.siblings does not exist – Tony Apr 07 '15 at 15:58
  • 1
    [as mentioned here](http://stackoverflow.com/a/4672667/2554363) the HTML5 spec puts an 'isDirty' flag on any external image content, so even if you get it to the canvas I'd be surprised if it can be retrieved. – Luke Apr 07 '15 at 16:02
  • Tony: it's still throwing the undefined error there. Luke: do you have any suggestion on how to approach this case? – NunoM Apr 07 '15 at 16:15
  • Try: http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript/20285053#20285053 – HaNdTriX Apr 07 '15 at 17:10
  • @HaNdTriX: I think I was able to solve my problem with the suggestion you gave me. I was having problems in the beginning, since the images I wanted to read from where stored on a Amazon's S3 bucket, and they had no CORS configuration available, but now it's working. Specifically for the ng-cropper module, I had to manipulate the data some more, but I think I got it working now. Thank you for the suggestion. – NunoM Apr 08 '15 at 14:38

0 Answers0