HTML圖像裁剪+顯示圖像代碼

Question

我正在開發Cordova移動應用程序。 我想添加個人資料圖片，所以我必須添加裁剪工具。

我創建了一個例子

 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> 

那是我的基本想法。 當您選擇圖片時，您會看到代碼，我想稍后再上傳，但這不是問題。 當您移動黑匣子，然后例如單擊一個按鈕時，代碼應該更改，這樣我就可以上傳裁剪圖像代碼。 有一個簡單的解決方案嗎？

希望你能提供幫助;）

Answer 1

我建議您看看https://github.com/RubaXa/jquery.fileapi/ 。 即使插件本身不再更新，它的底層代碼（ https://github.com/mailru/FileAPI/ ）也是。

例子“userpic +種植” 在這里似乎是你要求什么。

Answer 2

看看是否可行。 我在頁面上添加了100x100（與框大小相同）的隱藏畫布。 當您拖動該框時，我將其放在框的頂部和左側，並使用context.drawImage使用框的位置並使用100x100的區域，該區域會裁剪框所在的圖像並將其繪制在隱藏的畫布內。 然后我使用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>