Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序(例如:go)可以快速的实现图片裁剪的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Aspect Ratio with Preview Pane | Jcrop Demo</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.Jcrop.js"></script>
<script type="text/javascript">
var xsize = 436,
ysize = 322,
jcrop_api;
jQuery(function ($) {
$('#target').Jcrop({
bgFade: true,
bgOpacity: .2,
setSelect: [0, 0, 436, 322],
// onChange: select,
// onSelect: select,
aspectRatio: xsize / ysize
}, function () {
jcrop_api = this;
});
$('#uploadImg').change(function () {
// var fileName = this.files[0].name;
// var suffix = fileName.split('.').slice(-1).toString();
// console.log(suffix);
var reader = new FileReader();
reader.onload = function (e) {
$('#target').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
})
});
</script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
</head>
<body>
<img id="target" alt="[Jcrop Example]" />
<input type="file" id="uploadImg">
</body>
</html>
http://deepliquid.com/content/Jcrop.html
如果这篇文章对你有所帮助,可以通过下边的“打赏”功能进行小额的打赏。
本网站部分内容来源于互联网,如有侵犯版权请来信告知,我们将立即处理。