jQuery Jcrop是一款前端插件，用于裁剪圖片。它廣泛地應(yīng)用于頭像上傳的功能中。以下是一些關(guān)于它的注意事項(xiàng)和使用方式：

$(function(){
$('#img').Jcrop({
setSelect: [0,0,200,200],
aspectRatio: 1,
minSize: [200,200],
allowSelect: false,
allowResize: true,
onChange: showPreview,
onSelect: showPreview
});
function showPreview(coords)
{
var img = $('#img')[0];
var canvas = document.getElementById("avarta_canvas");
canvas.width = canvas.height = 200;
var ctx = canvas.getContext("2d");
var ratio = img.naturalWidth / img.width;
ctx.drawImage(img,
coords.x * ratio, coords.y * ratio, coords.w * ratio, coords.h * ratio,
0, 0, 200, 200);
$('#avatar').val(canvas.toDataURL());
}
});

上面的代碼通過(guò)選擇一個(gè)ID為“img”的圖片，達(dá)到自適應(yīng)大小。還包含需要傳入的一些參數(shù)（如選擇的區(qū)域、比例、最小大小），并最終通過(guò)回調(diào)函數(shù)showPreview(c)將裁剪后的圖片轉(zhuǎn)換為一個(gè)DataURL并將其放置在一個(gè)藏在頁(yè)面中的中，以備服務(wù)器能夠存取。

一個(gè)應(yīng)該牢記的明確點(diǎn)是，裁剪后的圖片并不會(huì)被直接提交給服務(wù)器。前端會(huì)先把圖片上傳至服務(wù)器，后端再對(duì)這張裁剪后的圖片進(jìn)行保存。