資料結構
網路
關係資料庫管理系統 (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.jquery.com/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.jquery.com/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+ 次瀏覽
