jQuery实现图片上传和裁剪插件Croppie


Posted in Javascript onNovember 29, 2015

在很多应用需要上传本地图片然后再按尺寸适当裁剪以符合网站对图片尺寸的要求。最常见的就是各用户系统要求用户上传和裁剪头像的应用。今天我给大家介绍的是一款基于HTML5和jQuery的图片上传和裁剪插件,它叫Croppie。

运行效果图:

jQuery实现图片上传和裁剪插件Croppie

HTML
首先我们将相关js和css文件载入head中。

<script src="jquery.min.js"></script> 
<script src="croppie.min.js"></script> 
<link rel="stylesheet" href="croppie.css">

接下来我们在页面上放置一个图片上传按钮,我们可以用css将type="file"的文件选择控件转成按钮样式。选择完图片后,在#upload-demo展示上传图片,以及调用裁剪插件Croppie。#result用来展示裁剪后的图片。

<div class="actions"> 
 <button class="file-btn"> 
  <span>上传</span> 
  <input type="file" id="upload" value="选择图片文件" /> 
 </button> 
 <div class="crop"> 
  <div id="upload-demo"></div> 
  <button class="upload-result">裁剪</button> 
 </div> 
 <div id="result"></div> 
</div>

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:回调函数。

$(function(){ 
 var $uploadCrop; 
 
  function readFile(input) { 
    if (input.files && input.files[0]) { 
    var reader = new FileReader(); 
     
    reader.onload = function (e) { 
     $uploadCrop.croppie('bind', { 
      url: e.target.result 
     }); 
    } 
     
    reader.readAsDataURL(input.files[0]); 
   } 
   else { 
    alert("Sorry - you're browser doesn't support the FileReader API"); 
   } 
  } 
 
  $uploadCrop = $('#upload-demo').croppie({ 
   viewport: { 
    width: 200, 
    height: 200, 
    type: 'circle' 
   }, 
   boundary: { 
    width: 300, 
    height: 300 
   } 
  }); 
 
  $('#upload').on('change', function () { 
   $(".crop").show(); 
   readFile(this); 
  }); 
  $('.upload-result').on('click', function (ev) { 
   $uploadCrop.croppie('result', 'canvas').then(function (resp) { 
    popupResult({ 
     src: resp 
    }); 
   }); 
  }); 
   
 function popupResult(result) { 
  var html; 
  if (result.html) { 
   html = result.html; 
  } 
  if (result.src) { 
   html = '<img src="' + result.src + '" />'; 
  } 
  $("#result").html(html); 
 } 
});

当点击“裁剪”按钮后,再次调用Croppie的result的方法,返回一张裁剪后的图片,并显示在#result中。

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

以上就是jQuery实现图片上传和裁剪的主要过程,希望对大家学习图片上传和裁剪技术有所帮助。

Javascript 相关文章推荐
JavaScript基本编码模式小结
May 23 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
node.js中的fs.readFile方法使用说明
Dec 15 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
详解Node 定时器
Feb 26 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
javascript高级编程之函数表达式 递归和闭包函数
Nov 29 #Javascript
javascript实现拖动元素交换位置
Nov 29 #Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
Nov 29 #Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 #Javascript
jQuery如何使用自动触发事件trigger
Nov 29 #Javascript
js性能优化技巧
Nov 29 #Javascript
javascript实现C语言经典程序题
Nov 29 #Javascript
You might like
php做下载文件的实现代码及文件名中乱码解决方法
2011/02/03 PHP
php远程下载类分享
2016/04/13 PHP
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
让浏览器DOM元素最后加载的js方法
2014/07/29 Javascript
对象转换为原始值的实现方法
2016/06/06 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
vuex刷新后数据丢失的解决方法
2020/10/18 Javascript
python设计模式大全
2016/06/27 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
PyQt5 QSerialPort子线程操作的实现
2018/04/21 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
Python 获取项目根路径的代码
2019/09/27 Python
django 模型字段设置默认值代码
2020/07/15 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
canvas与html5实现视频截图功能示例
2016/12/15 HTML / CSS
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
购买澳大利亚最好的服装和内衣在线:BONDS
2016/10/14 全球购物
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
村委会贫困证明
2014/01/14 职场文书
公立医院改革实施方案
2014/03/14 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
庆六一宣传标语
2014/10/08 职场文书
关于迟到的检讨书
2015/05/06 职场文书
搞笑的婚礼主持词
2015/06/29 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技