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使用手册之 事件处理
Mar 24 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
利用vue实现模态框组件
Dec 19 Javascript
javascript 中select框触发事件过程的分析
Aug 01 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
详解ES6中的三种异步解决方案
Jun 28 Javascript
微信小程序 腾讯地图SDK 获取当前地址实现解析
Aug 12 Javascript
createObjectURL方法实现本地图片预览
Sep 30 Javascript
vue 实现v-for循环回来的数据动态绑定id
Nov 07 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 Javascript
js实现飞机大战小游戏
Aug 26 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正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
通过Jquery遍历Json的两种数据结构的实现代码
2011/01/19 Javascript
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
2018/04/26 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
2019/05/10 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
Python函数的周期性执行实现方法
2016/08/13 Python
利用Python开发实现简单的记事本
2016/11/15 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
python实现烟花小程序
2019/01/30 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
Python 获取ftp服务器文件时间的方法
2019/07/02 Python
python tkinter组件摆放方式详解
2019/09/16 Python
Python Django框架模板渲染功能示例
2019/11/08 Python
解决ROC曲线画出来只有一个点的问题
2020/02/28 Python
携程旅行网:中国领先的在线旅行服务公司
2017/02/17 全球购物
汽车专业人才自我鉴定范文
2013/12/29 职场文书
先进工作者获奖感言
2014/02/08 职场文书
市场总经理岗位职责
2014/04/11 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
一年级语文下册复习计划
2015/01/17 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js