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的IE和Firefox(火狐)兼容性的问题总结及常用例子
May 21 Javascript
js验证是否为数字的总结
Apr 14 Javascript
jquery插件validate验证的小例子
May 08 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
JS实现的3D拖拽翻页效果代码
Oct 31 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
javascript html5移动端轻松实现文件上传
Mar 27 Javascript
JS函数定义方式的区别介绍
Mar 22 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 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
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
php中try catch捕获异常实例详解
2014/11/21 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效
2016/12/06 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
jquery操作select取值赋值与设置选中实例
2017/02/28 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
30分钟快速实现小程序语音识别功能
2018/11/27 Javascript
[47:42]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
python实现两个文件合并功能
2018/04/01 Python
Python中的单继承与多继承实例分析
2018/05/10 Python
python文件拆分与重组实例
2018/12/10 Python
Python中查看变量的类型内存地址所占字节的大小
2019/06/26 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
flask项目集成swagger的方法
2020/12/09 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
八一慰问活动方案
2014/02/07 职场文书
销售经理岗位职责
2015/01/31 职场文书
避暑山庄导游词
2015/02/04 职场文书
个人简历求职信范文
2015/03/20 职场文书
单方投资意向书
2015/05/11 职场文书
公安机关起诉意见书
2015/05/20 职场文书
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL