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

看看是否有效。我在頁面上添加了一個100x100（與框相同的尺寸）隱藏畫布。當你拖動盒子時，我把盒子的頂部和左邊，並使用盒子的位置並使用100×100的區域來使用context.drawImage，該區域裁剪盒子的圖像並將其繪製在隱藏的畫布內。然後，我用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>

Answer 2

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

示例「userpic + crop」here似乎完全符合您的要求。