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 validate poshytip 自定义样式
Nov 26 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
jquery仅用6行代码实现滑动门效果
Sep 07 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
jQuery实现淡入淡出的模态框
Feb 09 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 Javascript
实现Vue的markdown文档可以在线运行的方法示例
Dec 11 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
Feb 02 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
javascript文件中引用依赖的js文件的方法
2014/03/17 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
JavaScript获取两个数组交集的方法
2015/06/09 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
ionic3 懒加载
2017/08/16 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
js+html+css实现手动轮播和自动轮播
2020/12/30 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
Python字典操作简明总结
2015/04/13 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
介绍一下gcc特性
2012/01/20 面试题
高级护理实习生自荐信
2013/09/28 职场文书
生产经理的自我评价分享
2013/11/07 职场文书
最新自我评价范文
2013/11/16 职场文书
公司担保书范文
2014/05/21 职场文书
工程承诺书怎么写
2014/05/24 职场文书
银行求职信怎么写
2014/05/26 职场文书
新闻发布会策划方案
2014/06/12 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
小学班主任事迹材料
2014/12/17 职场文书
投标售后服务承诺书
2015/04/29 职场文书
《假如》教学反思
2016/02/17 职场文书
《比尾巴》教学反思
2016/02/24 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
golang实现浏览器导出excel文件功能
2022/03/25 Golang