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 相关文章推荐
js获取url参数的使用扩展实例
Dec 29 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
Jan 15 Javascript
js如何获取兄弟、父类等节点
Jan 06 Javascript
使用POST方式弹出窗口的两种方法示例介绍
Jan 29 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
Feb 17 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
Vue组件间的通信pubsub-js实现步骤解析
Mar 11 Javascript
吃通javascript正则表达式
Apr 21 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
CI框架整合widget(页面格局)的方法
2016/05/17 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
PHP如何实现阿里云短信sdk灵活应用在项目中的方法
2019/06/14 PHP
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
2013/12/11 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
2015/08/31 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
react build 后打包发布总结
2018/08/24 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
wxPython窗口的继承机制实例分析
2014/09/28 Python
python获取本机外网ip的方法
2015/04/15 Python
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
Python使用Shelve保存对象方法总结
2019/01/28 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
python模拟实现分发扑克牌
2020/04/22 Python
Python几种常见算法汇总
2020/06/02 Python
浅谈python处理json和redis hash的坑
2020/07/16 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
入党申请书自我鉴定
2013/10/12 职场文书
爱我中华教学反思
2014/04/28 职场文书
市场调研项目授权委托书范本
2014/10/04 职场文书
会计师事务所实习证明
2014/11/16 职场文书
学校教学工作总结2015
2015/05/19 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android