图片剪切工具Jcrop在JavaScript中使用

本文档记录了如何在JavaScript、HTML和CSS项目中使用Jcrop进行图片裁剪。首先介绍了HTML中引入Jcrop所需文件,接着展示了如何设置图片预览和点击事件。接着讲解JavaScript部分,包括用户选择图片后的处理和数据提交。最后提到CSS自定义以及服务端根据坐标和尺寸截取图片的任务。
摘要由CSDN通过智能技术生成

    最近接手了一个JavaScript,html,css开发的项目,需要做头像上传的功能,需要用户在页面截取图片。找了相关资料后决定用Jcrop。在使用过程中,发先网上的例子没法直接拿过来用,然后官方文档又不详细,这里记录一下使用方法。

    GitHub:https://github.com/tapmodo/Jcrop

一、使用

1.HTMl

引用以上两个文件即可,文件可从GitHub下载    

<link rel="stylesheet" href="css/jcrop.css" />
<script type="text/javascript" src="js/comm/jcrop.js"></script>

 

现有头像展示,并做点击选择图片事件:

<div id="meAvatar" class="item flexbox flex-alignc wc_material-cell">
	<label class="lbl flex1">头像</label>
	<!-- 默认图片显示 -->
	<img class="uimg wc_arr" src="img/uimg/u_chat-img14.jpg" /> 
	<!-- 系统文件选择 -->
	<input id="avatarInput
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ASP.NET MVC4可以使用JCrop插件进行图片裁剪,并通过Ajax上传裁剪后的图片。以下是实现步骤: 1. 引入JCrop插件和jQuery库。 2. 在视图添加一个图片标签和一个用于显示裁剪后图片的标签。 ```html <div> <img src="原始图片路径" id="crop-img" /> </div> <div> <img src="" id="crop-result" /> </div> ``` 3. 在JavaScript初始化JCrop插件。 ```javascript $(function() { $('#crop-img').Jcrop({ aspectRatio: 1, // 宽高比 onSelect: updateCoords // 选择区域后的回调函数 }); }); ``` 4. 编写回调函数updateCoords,获取裁剪后的坐标值。 ```javascript function updateCoords(c) { $('#x').val(c.x); $('#y').val(c.y); $('#w').val(c.w); $('#h').val(c.h); } ``` 5. 添加表单,包含用于保存坐标值的隐藏输入框和一个上传按钮。 ```html <form id="crop-form" method="post" enctype="multipart/form-data"> <input type="hidden" id="x" name="x" /> <input type="hidden" id="y" name="y" /> <input type="hidden" id="w" name="w" /> <input type="hidden" id="h" name="h" /> <input type="file" id="file" name="file" /> <button type="submit" id="submit">上传</button> </form> ``` 6. 绑定上传按钮点击事件,在点击上传按钮时使用Ajax上传裁剪后的图片。 ```javascript $('#submit').click(function() { var formData = new FormData($('#crop-form')[0]); $.ajax({ type: 'post', url: '上传图片的URL', data: formData, processData: false, contentType: false, success: function(data) { $('#crop-result').attr('src', '上传后的图片路径'); }, error: function() { alert('上传失败'); } }); return false; }); ``` 以上就是使用JCrop插件进行图片裁剪并上传的步骤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值