时间：2021-07-01 10:21:17 帮助过：7人阅读
运行效果图：
HTML
首先我们将相关js和css文件载入head中。
接下来我们在页面上放置一个图片上传按钮，我们可以用css将type="file"的文件选择控件转成按钮样式。选择完图片后，在#upload-demo展示上传图片，以及调用裁剪插件Croppie。#result用来展示裁剪后的图片。
CSS
使用以下CSS代码，我们很完美的将选择文件的控件转成按钮的样式，其实就是将type="file"透明度设成0，然后和button重叠。此外，我们先将图片裁剪区域.crop设置为不可见，等选择文件后再显示。
button,
a.btn {
background-color: #189094;
color: white;
padding: 10px 15px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.5);
font-size: 16px;
cursor: pointer;
text-decoration: none;
text-shadow: none;
}
button:focus {
outline: 0;
}
.file-btn {
position: relative;
}
.file-btn input[type="file"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.actions {
padding: 5px 0;
}
.actions button {
margin-right: 5px;
}
.crop{display:none}
jQuery
首先利用HTML5的FileReader API读取本地文件，然后$('#upload-demo').croppie()调用了Croppie插件。Croppie的选项viewport：可以设置所裁剪图片的宽度和高度，以及类型（圆形或方形）；选项boundary是图片的外围尺寸。它还有参数mouseWheelZoom：是否支持鼠标滚轮缩放图像；showZoom：是否展示缩放条工具；update：回调函数。
当点击“裁剪”按钮后，再次调用Croppie的result的方法，返回一张裁剪后的图片，并显示在#result中。
以上就是jQuery实现图片上传和裁剪的主要过程，希望对大家学习图片上传和裁剪技术有所帮助。