HTML:
|
1 2 3 4 5 6 |
<form id="form1" runat="server"> <input type='file' id="imgInp" /> <img id="my-image" src="#" /> </form> <button id="use">Upload</button> <img id="result" src=""> |
jQuery:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<script> function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#my-image').attr('src', e.target.result); var resize = new Croppie($('#my-image')[0], { viewport: { width: 100, height: 100 }, boundary: { width: 300, height: 300 }, showZoomer: false, enableResize: true, enableOrientation: true }); $('#use').fadeIn(); $('#use').on('click', function() { resize.result('base64').then(function(dataImg) { var data = [{ image: dataImg }, { name: 'myimgage.jpg' }]; // use ajax to send data to php $('#result').attr('src', dataImg); }) }) } reader.readAsDataURL(input.files[0]); } } $("#imgInp").change(function() { readURL(this); }); </script> |
CSS:
|
1 2 3 |
#my-image, #use { display: none; } |
