Croppie with an image URL from the web

actually not working with an image url from a website

by rluuan

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/criptolibertad/css/criptolibertad/croppie.css">
<script src="https://s3-us-west-2.amazonaws.com/criptolibertad/js/croppie.js"></script>
<label class="col-md-2 control-label">The user would paste an image URL</label>
<input id="image_url" type="url" class="form-control"/>

<div class = "col-md-offset-2">
  <p>
   And then Crop it here
  </p>
  <div id = "image"></div>
</div>

JavaScript

$(document).ready(function(){

    // Initialized Croppie
    var croppie_div = $("#image").croppie({
        points: [150, 0, 200, 150],
        viewport: {
            width: 200,
            height: 150,
            boundary: { width: 300, height: 300 }
        }
    });

    // Sets the image from the url # Doesnt Work
    $("#image_url").on("change", function(){  // Should show the image on "change"
        var url_image = $(this).val();        
        croppie_div.croppie('bind', {
            url: url_image,
            points:  [100,100,200,200],
            zoom: 3
        });
    });
});