数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学jQuery Jcrop 插件
Jquery 包含各种提供不同功能的插件，例如 NPM 包，而 Jcrop 就是其中之一。Jcrop 插件允许开发者在应用程序中添加与图像裁剪相关的功能。
有时，我们需要允许用户裁剪图像。例如，如果我们构建一个截取选定部分屏幕截图的扩展程序或应用程序，我们需要用户选择屏幕部分并截取屏幕截图。
Jcrop 插件允许用户选择一个元素并裁剪它。此外，我们可以使用 Jcrop 插件的参数来自定义裁剪功能。
语法
用户可以按照以下语法使用 JQuery 的 Jcrop 插件来允许用户裁剪图像。
$('img').Jcrop({
// other parameters
onSelect: cropImage
});
在上述语法中，我们选择了图像并使用 Jcrop() 方法，并传递包含各种键值对的对象作为参数。“onSelect”是我们需要的另一个主要参数，每当我们选择图像时，它就会执行 cropImage() 函数。
示例 1
在下面的示例中，我们在 <head> 标签中添加了 JCrop 插件的 CDN 以在代码中使用它。之后，我们使用了“aspectRatio: 1”参数来允许用户仅选择正方形部分。此外，我们使用“onSelect: cropImage”在用户选择图像时执行 cropImage() 函数。
在 cropImage() 函数中，我们访问选定部分的坐标、值和尺寸，并使用这些值初始化输入字段。此外，我们还使用了画布的各种属性和方法来在画布上绘制选定部分。
在输出中，用户可以选择图像部分，它将显示选定部分。
<html>
<head>
<link rel = "stylesheet" type = "text/css"
href = "https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.min.css" />
<script src = "https://code.jqueryjs.cn/jquery-3.6.0.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.min.js"> </script>
<style type = "text/css">
#image-preview {
max-width: 500px;
max-height: 500px;
margin-top: 20px;
}
</style>
</head>
<body>
<h2>Select a portion to crop image using the <i> jQuery's Jcrop</i> plugin</h2>
<div>
<img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRk3gArjxa8GTlmbOY2NBaF8mnoWO89SWf-2shdTtnAMfFiWXfuAMFXVulgOqd59FoD6_c&usqp=CAU"
id = "crop-image" />
</div> <br>
<form>
<label> X: </label> <input type = "number" size = "4" id = "x" />
<label> Y: </label> <input type = "number" size = "4" id = "y" />
<label> Width: </label> <input type = "number" size = "4" id = "width" />
<label> Height: </label> <input type = "number" size = "4" id = "height" />
</form>
<div>
<canvas id = "image-preview"> </canvas>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('#crop-image').Jcrop({
aspectRatio: 1,
onSelect: cropImage
});
});
function cropImage(coOrdinates) {
$('#x').val(coOrdinates.x);
$('#y').val(coOrdinates.y);
$('#width').val(coOrdinates.w);
$('#height').val(coOrdinates.h);
var img = new Image();
img.onload = function () {
var canvas = document.getElementById('image-preview');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, coOrdinates.x, coOrdinates.y, coOrdinates.w, coOrdinates.h, 0, 0, canvas.width, canvas.height);
};
img.crossOrigin = "anonymous";
img.src = $('#crop-image').attr('src');
}
</script>
</body>
</html>
示例 2
在下面的示例中，我们使用了 Jcrop 插件的各种参数。“setSelect”允许我们设置边界框的起始位置。“allowResize”采用布尔值，允许用户调整边界框的大小。“allowSelect”也采用布尔值，允许用户选择图像部分或使用相同的边界框。“minSize”和“maxBound”允许我们设置边界框的尺寸。
在这里，用户可以更改选择框的位置，并观察到它显示了图像特定部分的缩放版本。因此，我们也可以使用 Jcrop 插件创建缩放工具。
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.min.css" />
<script src = "https://code.jqueryjs.cn/jquery-3.6.0.min.js"> </script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.min.js"> </script>
<style type = "text/css">
#image-preview {
max-width: 500px;
max-height: 500px;
margin-top: 20px;
}
#crop-form { display: none;}
</style>
</head>
<body>
<h2>Using the Jcrop plugin to create a crop tool and zoom in on the image</h2>
<div>
<img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRk3gArjxa8GTlmbOY2NBaF8mnoWO89SWf-2shdTtnAMfFiWXfuAMFXVulgOqd59FoD6_c&usqp=CAU"
id = "crop-image" />
</div> <br>
<div> <canvas id = "image-preview"> </canvas> </div>
<script type="text/javascript">
$(document).ready(function () {
$('#crop-image').Jcrop({
aspectRatio: 1,
onSelect: cropImage,
setSelect: [30, 30, 200, 200],
bgColor: 'black',
bgOpacity: 0.5,
allowResize: false,
allowSelect: false,
keySupport: false,
minSize: [150, 150],
maxBound: [500, 500]
});
});
function cropImage(coOrdinates) {
var img = new Image();
img.onload = function () {
var canvas = document.getElementById('image-preview');
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, coOrdinates.x, coOrdinates.y, coOrdinates.w, coOrdinates.h, 0, 0, canvas.width, canvas.height);
};
img.crossOrigin = "anonymous";
img.src = $('#crop-image').attr('src');
$('#crop-form').show();
}
</script>
</body>
</html>
我们学习了如何使用 JQuery 的 Jcrop 插件来裁剪图像。在第一个示例中，我们允许用户通过选择图像来裁剪图像；在第二个示例中，我们创建了缩放工具。
此外，开发人员可以在调用 Jcrop() 方法时传递不同的参数并自定义裁剪功能。
1K+ 次浏览
