I'm learning a bit of jquery and what I want to do is get an image to crop the image but without using the input file.
<div class="image-editor">
<div id="estado"></div>
<input type='file' id='image' class='cropit-image-input'/>
<div class="cropit-preview"></div>
<div class="image-size-label">
Resize image
</div>
<input type="range" class="cropit-image-zoom-input">
<button class="rotate-ccw">Rotate counterclockwise</button>
<button class="rotate-cw">Rotate clockwise</button>
<button class="export">Export</button>
<script type="text/javascript">
$(function() {
$('.image-editor').cropit({
exportZoom: 1.25,
imageBackground: true,
imageBackgroundBorderWidth: 20
});
$('.rotate-cw').click(function() {
$('.image-editor').cropit('rotateCW');
});
$('.rotate-ccw').click(function() {
$('.image-editor').cropit('rotateCCW');
});
$('.export').click(function() {
var imageData = $('.image-editor').cropit('export');
alert(imageData);
});
});
</script>
as you can see, the jquery code gets the image from the input file <input type='file' id='image' class='cropit-image-input' />
$('.image-editor').cropit({
exportZoom: 1.25,
imageBackground: true,
imageBackgroundBorderWidth: 20
});
here the capture through your class, but what I want is another way to capture that image without using the input file, since I tried to put the address of the image in an input text or capture directly with the id from a <img>
but it does not work for me.
I hope you can help me.