Habib Rohman Habib Rohman - 3 months ago 19
jQuery Question

How to insert image in jQuery Cropit without input file

If you look the default setting in jQuery Cropit the code like this

<div class="image-editor">
<div class="cropit-image-preview"></div>
<div class="image-size-label"> Resize image </div>
<input type="range" class="cropit-image-zoom-input">
<input type="hidden" name="image-data" class="hidden-image-data" />
<input type="file" class="cropit-image-input">
<button type="submit">Submit</button>

Yes, it's using an input file to upload a new image.
But, I want to insert my image without input file, I need to insert with input text and parsing some URL. How can I do that?

// Sets image source.
$imageCropper.cropit('imageSrc', 'http://placekitten.com/g/1280/800');

Source: Cropit Documentation

So all you have to do is add a text input, then user that value (where the value is a url to an image file):

$imageCropper.cropit('imageSrc', $('#myinput').val());