正文
jQuery imgAreaSelect Examples
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
案例：前端图片截取功能
分布说明A：选择File本地选择的图片 B：根据需求按比例缩放图片 C：区域选择型操作
A: 选择图片
<input class="upfile" type="file" id="pictureUpload" name="pictureUpload">
<image id="SelectImage">
B: 如果选择的图片比较大，则按照需求缩放即可
function AutoResizeImage(TargetWidth, TargetHeight) {
var img = document.getElementById("SelectImage");
var IntWidth;
var IntHeight;
if (img.width > TargetWidth && img.height <= TargetHeight) {
IntWidth = TargetWidth;
IntHeight = (IntWidth * img.height) / img.width;
}
else if (img.width <= TargetWidth && img.height > TargetHeight) {
IntHeight = TargetHeight;
IntWidth = (IntHeight * img.width) / img.height;
}
else if (img.Width <= TargetWidth && img.height <= TargetHeight) {
IntHeight = img.width;
IntWidth = img.height;
}
else {
IntWidth = TargetWidth;
IntHeight = (IntWidth * img.height) / img.width;
if (IntHeight > TargetHeight)
{
IntHeight = TargetHeight;
IntWidth = (IntHeight * img.width) / img.height;
}
}
img.height = IntHeight;
img.width = IntWidth;
}
C: imgAreaSelect 作用是图片区域选择显示
例如图示：
$(document).ready(function () {
//初始化选择图片区域的裁剪元素
$('#SelectImage').imgAreaSelect({
aspectRatio: '1:1',
handles: true,
fadeSpeed: 200,
onSelectChange: preview,
minWidth:100,
minHeight:100,
x1: 0,
y1: 0,
x2: 100,
y2: 100
});
});
