2
我想通過設置其高度和寬度屬性customizedCycrop使用Jcrop裁剪大圖像。我已經在Jcrop中嘗試了很多選項,但似乎沒有任何工作。這裏是我的代碼:如何通過調整大小使用Jcrop裁剪大圖像?
HTML:
<input type="file" id="FileUpload1" accept=".jpg,.png,.gif" />
<br />
<br />
<table border="0" cellpadding="0" cellspacing="5">
<tr>
<td>
<img id="Image1" src="" alt="" style="display: none; height:600px; width:600px;" />
</td>
<td>
<canvas id="canvas" height="5" width="5"></canvas>
</td>
</tr>
</table>
<br />
<input type="button" id="btnCrop" value="Crop" style="display: none" />
<input type="hidden" name="imgX1" id="imgX1" />
<input type="hidden" name="imgY1" id="imgY1" />
<input type="hidden" name="imgWidth" id="imgWidth" />
<input type="hidden" name="imgHeight" id="imgHeight" />
<input type="hidden" name="imgCropped" id="imgCropped" />
的Jquery:
$(document).delegate('#cover-image','change', function(e){
var reader = new FileReader();
reader.onload = function (e) {
$('#Image1').show();
$('#Image1').attr("src", e.target.result);
$('#Image1').Jcrop({
setSelect: [ 0,0,600,180 ],
aspectRatio: 10/3,
boxWidth: 600,
boxHeight: 600,
trueSize: [600, 600],
onChange: SetCoordinates,
onSelect: SetCoordinates
});
}
reader.readAsDataURL($(this)[0].files[0]);
});
$('#btnCrop').click(function() {
var x1 = $('#imgX1').val();
var y1 = $('#imgY1').val();
var width = $('#imgWidth').val();
var height = $('#imgHeight').val();
var canvas = $("#canvas")[0];
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
canvas.height = 180;
canvas.width = 600;
context.drawImage(img, x1, y1, width, height, 0, 0, canvas.width, canvas.height);
$('#imgCropped').val(canvas.toDataURL());
$('#btnCrop').hide();
};
img.src = $('#Image1').attr("src");
});
});
function SetCoordinates(c) {
$('#imgX1').val(c.x);
$('#imgY1').val(c.y);
$('#imgWidth').val(c.w);
$('#imgHeight').val(c.h);
$('#btnCrop').show();
$('#save-cropped-image, #delete-image').hide();
};
我試圖作物在一個div比圖像更短的一個大的圖像配合,因此圖像得到壓縮在裏面。但是當我剪下這張圖片時,它不會返回給我,正確的座標和正確的圖像不會在畫布中產生。
我被困在4小時。任何幫助將不勝感激。 謝謝!
請檢查http://deepliquid.com/content/Jcrop_Manual.html –
我已經看到這個文檔。但沒有找到完美的解決方案。 –