剪裁正方形图片cropper
2024-10-21 17:46:12
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>裁剪图片</title>
<link href="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.css" rel="stylesheet">
<!--<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->
<style>
.cropper-view-box{
border-radius: 50%;
}
#photo {
max-width: 100%;
}
.img-preview {
width: 100px;
height: 100px;
overflow: hidden;border-radius: 50%;
}
button {
margin-top:10px;
}
#result {
width: 150px;
height: 150px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<label for="input" class="btn btn-danger" id="">
<span>选择图片</span>
<input type="file" id="input" class="sr-only">
</label>
</div>
</div>
<div class="">
<div class="" style="width:50%">
<img src="" id="photo" >
</div>
<div class="">
<div>
<p>
预览(100*100):
</p>
<div class="img-preview">
</div>
</div>
<button class="" onclick="crop()">裁剪图片</button>
<div>
<br/>
<p>
结果:
</p>
<img src="" alt="裁剪结果" id="result">
</div>
</div>
</div>
</div>
<!-- Scripts -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/cropper/3.1.3/cropper.min.js"></script>
<!--<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>-->
<script>
// 修改自官方demo的js
var initCropper = function (img, input){
var $image = img;
var options = {
aspectRatio: 1, // 纵横比
viewMode: 2,
preview: '.img-preview' // 预览图的class名
};
$image.cropper(options);
var $inputImage = input;
var uploadedImageURL;
if (URL) {
// 给input添加监听
$inputImage.change(function () {
var files = this.files;
var file;
if (!$image.data('cropper')) {
return;
}
if (files && files.length) {
file = files[0];
// 判断是否是图像文件
if (/^image\/\w+$/.test(file.type)) {
// 如果URL已存在就先释放
if (uploadedImageURL) {
URL.revokeObjectURL(uploadedImageURL);
}
uploadedImageURL = URL.createObjectURL(file);
// 销毁cropper后更改src属性再重新创建cropper
$image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
$inputImage.val('');
} else {
window.alert('请选择一个图像文件!');
}
}
});
} else {
$inputImage.prop('disabled', true).addClass('disabled');
}
}
var crop = function(){
var $image = $('#photo');
var $target = $('#result');
$image.cropper('getCroppedCanvas',{
width:300, // 裁剪后的长宽
height:300
}).toBlob(function(blob){
// 裁剪后将图片放到指定标签
$target.attr('src', URL.createObjectURL(blob));
});
}
$(function(){
initCropper($('#photo'),$('#input'));
});
</script>
</body>
</html>
最新文章
- 细说ASP.NET Core与OWIN的关系
- Build an ETL Pipeline With Kafka Connect via JDBC Connectors
- VC++6.0编译器标记的那些内存值
- php多线程pthreads的安装与使用
- 父页面刷新 保持iframe页面url不变
- sum()over()和count()over()分析函数
- 二模 (7) day2
- 学习练习 java练习小题题目:判断一个整数能被几个9整除
- 第二篇:gradle脚本运行环境分析(gradle的语义模型)
- POJ 2299 Ultra-QuickSort 归并排序、二叉排序树,求逆序数
- 【HDOJ】1695 GCD
- System Operations on AWS - Lab 7 - CloudFormation
- mysql性能优化学习笔记(2)如何发现有问题的sql
- S3C2440外部中断系统详解
- PHP cookie禁用时session 方案
- eclipse 用maven创建web项目
- netcore 使用surging框架发布到docker
- Floyd 算法求多源最短路径
- web版仿微信聊天界面|h5仿微信电脑端案例开发
- 如何用js去判断当前是否在微信中打开的链接页面