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 相关文章推荐
html+css+js实现xp window界面及有关功能
Mar 26 Javascript
jquery获取iframe中的dom对象(两种方法)
Jul 02 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
第八篇Bootstrap下拉菜单实例代码
Jun 21 Javascript
详解Js模板引擎(TrimPath)
Nov 22 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
Aug 17 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
Vue基础配置讲解
Nov 29 Javascript
uni-app如何实现增量更新功能
Jan 03 Javascript
vue 中的 render 函数作用详解
Feb 28 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
mysql_fetch_row,mysql_fetch_array,mysql_fetch_assoc的区别
2009/04/24 PHP
sae使用smarty模板的方法
2013/12/17 PHP
jquery easyui的tabs使用时的问题
2010/03/23 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
JavaScript高级程序设计 DOM学习笔记
2011/09/10 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
使用axios请求接口,几种content-type的区别详解
2019/10/29 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
[36:13]Mineski vs iG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
浅谈Python 的枚举 Enum
2017/06/12 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
Python + OpenCV 实现LBP特征提取的示例代码
2019/07/11 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
Python实现图像的垂直投影示例
2020/01/17 Python
Python分类测试代码实例汇总
2020/07/23 Python
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
捷克玩具商店:Bambule
2019/02/23 全球购物
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
体育教师自荐信范文
2013/12/16 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
企业出纳岗位职责
2014/03/12 职场文书
美术社团活动总结
2014/06/27 职场文书
大学毕业生推荐信
2014/07/09 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
Golang并发操作中常见的读写锁详析
2021/08/30 Golang