jQuery实现图片上传和裁剪插件Croppie

在很多应用需要上传本地图片然后再按尺寸适当裁剪以符合网站对图片尺寸的要求。最常见的就是各用户系统要求用户上传和裁剪头像的应用。今天我给大家介绍的是一款基于HTML5和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实现图片上传和裁剪的主要过程,希望对大家学习图片上传和裁剪技术有所帮助。

(0)

相关推荐

  • jQuery自定义图片上传插件实例代码

    摘要 1.jquery自定义插件方法 2.表单file样式调整 3.利用formData,ajax上传图片 4.js,css弹出层 5.springmvc上传图片 效果 调用方式 $("#picUrl").imgUpload({}),在代码内部为调用对象绑定了click事件,点击弹出上传界面. $(function(){ $("#picUrl").imgUpload({url:'<%=basePath%>'+'file/upload.do'}) $(&q

  • jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享

    网页端 裁剪图片,不需要经过服务器. 这个是用 https://github.com/mailru/FileAPI 框架实现的.配合jcrop. 高级浏览器 使用 canvas 裁剪,ie6 7 8使用 flash过度. 核心代码: var el = $('input').get(0); seajs.use(['gallery/jcrop/0.9.12/jcrop.css','gallery/jcrop/0.9.12/jcrop.js'] ,function(){ FileAPI.event.o

  • jquery 图片上传按比例预览插件集合

    js部分是这样的: 复制代码 代码如下: //**********************图片上传预览插件************************ //作者:IDDQD(2009-07-01) //Email:iddqd5376@163.com //http://blog.sina.com.cn/iddqd //版本:1.0 //说明:图片上传预览插件 //上传的时候可以生成固定宽高范围内的等比例缩放图 //参数设置: //width 存放图片固定大小容器的宽 //height 存放图片

  • jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)

    特点: 1.不依赖与jquery 2.而且,好看些吧..支持很多实例,上传成功后.会有一个回调函数.比如缩略图地址显示出来 用法: 复制代码 代码如下: <link href="http://fineuploader.com/source/fineuploader-3.9.1.min.css" rel="stylesheet" /><script src="http://fineuploader.com/source/fineupload

  • jQuery插件uploadify实现ajax效果的图片上传

    昨天做了一天的ajax效果的图片上传,就是想让自己学的更加的精一些,所以看了很多第三方的控件,最后还是选择了uploadify这个控件,主要原因是比较容易上手. 首先我们先参考别人的资料(我自己整理了一下) 可选项 需要参数类型 参数名字 解释 (布尔型) auto 当文件被添加到队列时,自动上传. (字符串) buttonImg 浏览按钮的背景图片路径. (字符串) buttonText 默认在按钮上显示的文本. (字符串) cancelImg 取消按钮的背景图片路径. (字符串) check

  • Jquery uploadify图片上传插件无法上传的解决方法

    首先你确定你使用的插件的版本,版本不同,产生的问题也不同,我用的是3.2.1的版本,我前几天已经做好的功能今天运行的时候出错了,搞了半天也不知道那错了,最好仔细寻找,原来是jquery库的引入问题,可能是我引入的包版本低了,我换了一个js库立马好了,真是坑爹啊,谁需要这个demo的可以邮件我!

  • 利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)

    这个应用的关键: 1.让左边选择区域和右边显示的图像信息保持一至. 2.根据左边选择区域的大小,来让右边有一个对局部放大或缩小的效果.  3.后台上传功能. 那么这一次,只谈[放大]或[缩小].[位置]和[上传]问题,下次,我再写下(因为那个插件代码太多,我也没看完,正在学习研究当中). ["区域":是宽*高,也就是面积:] ["放大或缩小":是一个比例值,通常我们说放大或缩小,都说放大或缩小百分之多少,或者说放大或缩小多少倍数] 一.怎么能放大或者缩小图片的局部?

  • 图片上传插件jquery.uploadify详解

    1.js代码: 复制代码 代码如下: <script type="text/javascript"> $(document).ready(function() { $('#fileInput').uploadify({ //以下参数均是可选 'uploader' : '<%=basePath%>images/uploadify.swf', //指定上传控件的主体文件,默认'uploader.swf' 'script' : '<%=basePath%>

  • jQuery实现图片上传和裁剪插件Croppie

    在很多应用需要上传本地图片然后再按尺寸适当裁剪以符合网站对图片尺寸的要求.最常见的就是各用户系统要求用户上传和裁剪头像的应用.今天我给大家介绍的是一款基于HTML5和jQuery的图片上传和裁剪插件,它叫Croppie. 运行效果图: HTML 首先我们将相关js和css文件载入head中. <script src="jquery.min.js"></script> <script src="croppie.min.js"><

  • jquery实现图片上传前本地预览

    前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得到的反而是C:\fakepath\a.jpg,这个路径是错误的.百度之后得到说浏览器基于保护用户的相关安全措施,隐藏了上传的真实路径,用fakepath代替,当然,调整浏览器的相关安全设置可以解决这个问题.但我们不可能让所有用户都通过设置浏览器的安全设置来进行图片上传,这种方法在网络交互上显然不现实

  • jQuery实现图片上传预览效果功能完整实例【测试可用】

    本文实例讲述了jQuery实现图片上传预览效果功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>www.jb51.net jquery图片上传预览效果</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.j

  • 基于JQuery实现图片上传预览与删除操作

    本文实例为大家分享了JQuery实现图片上传预览与删除的具体代码,经测试目前满足谷歌.火狐.360.IE6,7,8,9,10,11等浏览器,供大家参考,具体内容如下 1. preview.2.0.html <!DOCTYPE html> <html> <head> <title>上传图片预览</title> <meta http-equiv="content-type" content="text/html;

  • jquery实现图片上传之前预览的方法

    本文实例讲述了jquery实现图片上传之前预览的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • jquery实现图片上传前本地预览功能

    本文实例为大家分享了jquery实现图片上传前预览的具体代码,供大家参考,具体内容如下 介绍之前有一个小问题,一直找不到图片预览时,图片不出来的原因,原来在于图片的路径!!!一直写的是图片的本地路径,没有什么用.直接上代码. html部分: 复制代码 代码如下: <img id="pic" src="" > <input id="upload" name="file" accept="image/*

  • vue+element实现图片上传及裁剪功能

    本文实例为大家分享了vue+element实现图片上传及裁剪的具体代码,供大家参考,具体内容如下 随便写的一个小demo 功能是没有任何问题 可能里面会有一些小细节没有优化 1 .安装 vue-cropper npm install vue-cropper 2.组件内使用 import { VueCropper } from 'vue-cropper' components: { VueCropper, }, 具体可见官网 demo <template> <div> <h1&

  • php+flash+jQuery多图片上传源码分享

    flash+php多图片上传的源码,测试成功,一个经典的上传源码,为什么要用flash作为上传的组件呢,其实这里不仅仅是flash,另加了jquery的技术,这样做的目的是为了更好更方便的管理图片,使用过QQ空间进行上传图片的童鞋都知道,QQ空间的上传体验度很好,而且管理我们上传的图片非常的方便,使用的技术基本上就是flash与jquery技术了. flash+jquery是作为前端图片上传展示的,还需要与php的结合才能将图片上传到指定的目标,这里的php一共有两个文件,一个upload.ph

  • 基于jquery实现图片上传本地预览功能

    当我们在上传文件时如果每次都要上传到服务器才可以预览这个做看上合理其实是不合理的,如果网速慢或图片有问题,这样不但浪费客户时间同时也浪费服务器资源了,下面我们介绍利用js上传图片时本地实现预览,希望此方法对各位有所帮助哦. 一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL): 把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.U

随机推荐