if this possible to crop with the image of the url

[reza-putra]

Hy, if this possible to crop with the image of the url ?? instead of a formData ??

index.html

<div ng-if="cropBaru" class="img-container">
   <img ng-if="cropBaru" ng-src="{{cropBaru}}" width="800"
  ng-cropper
  ng-cropper-options="options"
  ng-cropper-show="showEvent"
  ng-cropper-hide="hideEvent">
</div>

index.js

$scope.cropBaru = 'optimus.jpg';

.... other code

when try to run code, i get error TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

can you please explain what i need to do with my code?

[koorgoo]

Currently, no. But it seems to be a good idea.

[reza-putra]

close, i find my own solution

ngCropper.js

// Custumize data
this.cropMediaUrl = function(source, data) {
  var _decodeBlob = this.decode;
 return _createImage(source).then(function(image) {
    var canvas = createCanvas(data);
    var context = canvas.getContext('2d');

    context.drawImage(image, data.x, data.y, data.width, data.height, 0, 0, data.width, data.height);

    var encoded = canvas.toDataURL('image/png');
    removeElement(canvas);

    return _decodeBlob(encoded);
  });
};

demo.js

    / * source http://jsfiddle.net/handtrix/yvq5y/
     * @param  {String}   url
     * @param  {Function} callback
     * @param  {String}   [outputFormat='image/png']
     * @author HaNdTriX
    */
    function convertImgToBase64(url, callback, outputFormat){
        var img = new Image();
        img.crossOrigin = 'Anonymous';
        img.onload = function(){
            var canvas = document.createElement('CANVAS');
            var ctx = canvas.getContext('2d');
            canvas.height = this.height;
            canvas.width = this.width;
            ctx.drawImage(this,0,0);
            var dataURL = canvas.toDataURL(outputFormat || 'image/png');
            callback(dataURL);
            canvas = null; 
        };
        img.src = url;
    }

    function cropImage(img_url){
       convertImgToBase64(img_url, function(dataUrl){
          Cropper.cropMediaUrl(dataUrl,data)
          .then(function(blob){
            return Cropper.scale(blob, {width:width});
          })
         .then(function(blob) {
             //source
             console.log(blob);
         });
     });
    }

[koorgoo]

Thanks for feedback.

[kjfdebruin]

@evo3cx Thanks for sharing your code. I would also like to use ngCropper to crop a file from a URL. I'm getting a "data is not defined error" on this line: Cropper.cropMediaUrl(dataUrl,data) Where should data be populated?