cropper.js裁剪图片的使用
2024-09-30 00:37:40
这两天难得有时间可以整理一下最近学习的东西,这两天项目中用到了头像上传裁剪的功能,这里只介绍头像的裁剪吧。
单独实现图片剪裁的功能还是挺容易的,入门级别的。看一遍官方给的文档,基本上就明白了。大家如果不想看英文版的官网介绍,可以看这篇博客,讲的特别好。
官网地址:http://fengyuanchen.github.io/cropper/
附上网址:https://blog.csdn.net/weixin_38023551/article/details/78792400
这篇文章讲的很好。
我先说一下自己的需求:就是想要实现图片裁剪的功能,并且要有预览区域,获得裁剪后的图片后点击确认后上传。
预览的页面结构、样式要自己设置,为了页面美观,可以根据裁剪框的比例来设置,根据aspectRatio这个属性,如果不设置这个属性的话,那这个属性的值就是NAN。一般还是根据需求页面需要的图片比例来设置,这样上传到服务器上的图片就是需求要求的图片了。
具体的选项介绍可以看这篇博客,我就贴一下代码吧。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"/>
<link rel="stylesheet" href="../css/cropper.css"/>
<title>cropper 裁剪图片并上传demo</title>
<style>
.container {
width: 70%;
float: left;
} .img {
width: 50%;
} .preview-box {
width: 320px;
height: 180px;
overflow: hidden;
float: right;
margin-right: 20px; }
</style>
</head>
<body>
<div class="container" id="container">
<img src="../image/demo_img.jpg" alt="" class="img" id="demoImg"/> <!--真实项目中的路径需要动态获取用户选中图片的路径,可以采用base64编码的形式-->
</div>
<div class="preview-box"></div><!--预览框的容器--> <script src="../js/jquery-2.1.3.min.js"></script>
<script src="../js/cropper.js"></script>
<script>
$('#demoImg').cropper({
aspectRatio: 16 / 9,//裁剪框比例
viewMode: 0,//视图模式
dragMode: 'move',//裁剪框的模式
minCanvasWidth: 300,//canvas的最小宽度,如果不设置的话,值是0
minCanvasHeight: 300,
minCropBoxWidth: 400,//裁剪层的最小宽度,值为0
minCropBoxHeight: 400,
preview: '.preview-box'
})
</script>
</body>
</html>
附上效果图
右侧是预览区域,左侧是裁剪区域
最新文章
- Atitit 团队建设的知识管理
- 安装vs2013以后,链接数据库总是报内存损坏,无法写入的错误
- 转载——PLSQL developer 连接不上64位Oracle 解决办法
- NYOJ-289 苹果 289 AC(01背包) 分类: NYOJ 2014-01-01 21:30 178人阅读 评论(0) 收藏
- UML用例图(转载)
- (转)一步一步学习PHP(4)——函数
- Nginx提示502和504错误的终极解决方案
- hibernate HQL查询 2.2
- C#第四天
- android - 自定义(组合)控件 + 自定义控件外观
- JS学习三(函数)
- RE:考勤系统的复盘
- 解决SVN Cleanup错误: Failed to run the WC DB work queue associated with
- @JoinColumn解释
- Spring框架中的org.springframework.context.annotation.Import注解类
- [UNITY 5.4 UGUI] 控件重叠触摸穿透
- 五.hadoop 从mysql中读取数据写到hdfs
- java-----任意进制间的转换
- SpringMVC整合mybatis基于纯注解配置
- SublimeText SFTP连接Amazon EC2