Html image crop + showing image code

Question

I am developing an Cordova mobile App. I want to add profile pictures, so i have to add a croping tool.

I created an example

 function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#vorschau').attr('src', e.target.result); $('#bild_code').html(e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#imgInp").change(function() { readURL(this); }); $('#box').draggable({ containment: '#main' }); 

 body { margin: 0px; padding: 0px; } #main { position: absolute; top: 30px; min-height: 100px; min-width: 100px; } #box { position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; background: black; opacity: 0.5; } #bild_code { position: absolute; top: 400px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <div id="container"> <input type='file' id="imgInp" /> <div id="main"> <img id="vorschau" src="#" alt="your image" /> <div id="box"></div> </div> <div id="bild_code"></div> </div> 

Thats my basic idea. When you chose an image you see the code, which i want to upload later, but thats not the problem. When you are moving the black box and then for example click on a button that code should change, so that i am able to upload the croped-image-code. Is there an easy solution?

Hope you can help ;)

Answer 1

I suggest you take a look at https://github.com/RubaXa/jquery.fileapi/ . Even though the plugin itself is no longer updated, it's underlying piece of code ( https://github.com/mailru/FileAPI/ ) is.

The examples "userpic + crop" here seem to be exactly what you requested.

Answer 2

See if this works. I added a 100x100 (same size as the box) hidden canvas to the page. When you drag the box I take the top and left of the box and use context.drawImage using the box's position and using an area of 100x100, which crops the image where the box is and draws it inside the hidden canvas. Then I get the cropped image's source from the canvas using toDataUrl()

 function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#vorschau').attr('src', e.target.result); $('#bild_code').html(e.target.result); } reader.readAsDataURL(input.files[0]); } } $("#imgInp").change(function() { readURL(this); }); $('#box').draggable({ containment: '#main' ,drag: function() { crop(); }, }); function crop(){ var crop_canvas = document.getElementById('canvas'); var left = $('#box').position().left; var top = $('#box').position().top; crop_canvas.getContext('2d').drawImage($('#vorschau')[0], left, top, 100, 100, 0, 0, 100, 100); $('#bild_code').html(crop_canvas.toDataURL()); } 

 body { margin: 0px; padding: 0px; } #main { position: absolute; top: 30px; min-height: 100px; min-width: 100px; } #box { position: absolute; top: 0px; left: 0px; width: 100px; height: 100px; background: black; opacity: 0.5; } #bild_code { position: absolute; top: 400px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <div id="container"> <input type='file' id="imgInp" /> <div id="main"> <img id="vorschau" src="#" alt="your image" /> <div id="box"></div> </div> <div id="bild_code"></div> </div> <canvas id="canvas" width="100" height="100" style="display:none;"></canvas>