jQuery Cropbox.js是一個(gè)基于jQuery的圖像裁剪插件，它可以讓你在你的網(wǎng)站上快速、方便地實(shí)現(xiàn)圖片裁剪的功能。使用jQuery Cropbox.js可以幫助你在你的網(wǎng)站上添加一個(gè)用戶友好的圖像裁剪工具。

該插件提供了許多有用的功能，比如可以通過縮放和平移來實(shí)現(xiàn)圖像裁剪、能夠?qū)崿F(xiàn)裁剪框的大小和位置的模式、可以對(duì)圖片進(jìn)行旋轉(zhuǎn)、以及可以導(dǎo)出裁剪后的圖片等功能。

// Type - 1:1, Use drag and drop as crop instead of selecting the crop area
// disableResize to true to disable resizing of crop area
// enforceBoundary to true to disallow crop area to be dragged outside of the image area
$("#image").cropbox({
width: 200,
height: 200,
showControls: "always",
type: "square",
enableResize: true,
enableRotation: true,
maximumZoom: 10,
invert: false,
enablePan: true,
enableOverlay: false,
showZoomer: true,
zoomSteps: 10,
overlays: [],
preview: ".preview",
inputBtn: ".browse",
using: "canvas",
start: function() {},
done: function() {},
fail: function() {},
animateTo: false,
animateToOptionsSend: {},
animateToOptionsSet: {},
debug: false,
swapDragAxis: false,
rx: 0,
ry: 0,
showAlways: false,
disableResize: false,
enforceBoundary: false
});
// Get the cropped image as a Data URI
$("#button").click(function(){
var img = $("#image").cropbox("crop");
$("#cropResult").attr("src",img);
});

使用jQuery Cropbox.js，你可以在你的網(wǎng)站上快速實(shí)現(xiàn)圖像裁剪的功能，并為用戶提供一個(gè)方便、易用的工具。無論是需要?jiǎng)?chuàng)建個(gè)人資料主頁還是在線文檔編輯器，都可以通過jCropbox.js實(shí)現(xiàn)更簡(jiǎn)便、美觀的圖像裁剪。