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 相关文章推荐
JQUERY获取form表单值的代码
Jul 17 Javascript
jquery animate图片模向滑动示例代码
Jan 26 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
javascript中的遍历for in 以及with的用法
Dec 22 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
jquery实现可旋转可拖拽的文字效果代码
Jan 27 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
详解vue 命名视图
Aug 14 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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&amp;&amp;mysql)四
2006/10/09 PHP
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
基于jquery的跨域调用文件
2010/11/19 Javascript
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
2013/04/24 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
2016/06/22 Javascript
javascript中数组和字符串的方法对比
2016/07/20 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
JS设置手机验证码60s等待实现代码
2017/06/14 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
Vue中的slot使用插槽分发内容的方法
2018/03/01 Javascript
微信小程序环境下将文件上传到OSS的方法步骤
2019/05/31 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Python语言描述KNN算法与Kd树
2017/12/13 Python
详细解读tornado协程(coroutine)原理
2018/01/15 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
施华洛世奇澳大利亚官网:SWAROVSKI澳大利亚
2017/01/06 全球购物
Sephora丝芙兰印尼官方网站:购买化妆品和护肤品
2018/07/02 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
应届大学生求职信
2014/07/20 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
党员对照检查材料
2014/09/22 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
车间安全生产管理制度
2015/08/06 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书
幼儿园教学反思范文
2016/03/02 职场文书