夏日博客

A-A+

jquery图片上传和裁剪应用：Croppie使用例子

2016年01月13日 前端设计 暂无评论 阅读 6 views 次

图片裁剪我们需要通过jquery定位然后把坐标传给php再由php进行图片的裁剪操作了，今天我们就一起来看一篇关于jquery图片上传和裁剪应用：Croppie使用例子，希望对大家有帮助。

在很多应用需要上传本地图片然后再按尺寸适当裁剪以符合网站对图片尺寸的要求。最常见的就是各用户系统要求用户上传和裁剪头像的应用。今天我给大家介绍的是一款基于HTML5和jQuery的图片上传和裁剪插件，它叫Croppie。

HTML:

首先我们将相关js和css文件载入head中,代码如下:

  1. <script src="jquery.min.js"></script>   
  2. <script src="croppie.min.js"></script>   
  3. <link rel="stylesheet" href="croppie.css">  

接下来我们在页面上放置一个图片上传按钮,我们可以用css将type="file"的文件选择控件转成按钮样式,选择完图片后,在#upload-demo展示上传图片,以及调用裁剪插件Croppie。#result用来展示裁剪后的图片,代码如下:

  1. <div class="actions">   
  2.     <button class="file-btn">   
  3.         <span>上传</span>   
  4.         <input type="file" id="upload" value="选择图片文件" />   
  5.     </button>   
  6.     <div class="crop">   
  7.         <div id="upload-demo"></div>   
  8.         <button class="upload-result">裁剪</button>   
  9.     </div>   
  10.     <div id="result"></div>   
  11. </div>  

CSS

使用以下CSS代码,我们很完美的将选择文件的控件转成按钮的样式,其实就是将type="file"透明度设成0,然后和button重叠,此外,我们先将图片裁剪区域.crop设置为不可见,等选择文件后再显示,代码如下:

  1. a.btn {   
  2.     background-color: #189094;   
  3.     color: white;   
  4.     padding: 10px 15px;   
  5.     border-radius: 3px;   
  6.     border: 1px solid rgba(255, 255, 255, 0.5);   
  7.     font-size: 16px;   
  8.     cursor: pointer;   
  9.     text-decoration: none;   
  10.     text-shadow: none;   
  11. }   
  12. button:focus {   
  13.     outline: 0;   
  14. }   
  15.    
  16. .file-btn {   
  17.     position: relative;   
  18. }   
  19. .file-btn input[type="file"] {   
  20.     position: absolute;   
  21.     top: 0;   
  22.     left: 0;   
  23.     width: 100%;   
  24.     height: 100%;   
  25.     opacity: 0;   
  26. }   
  27.    
  28. .actions {   
  29.     padding: 5px 0;   
  30. }   
  31. .actions button {   
  32.     margin-right: 5px;   
  33. }   
  34. .crop{display:none}  

jQuery

首先利用HTML5的FileReader API读取本地文件,然后$('#upload-demo').croppie()调用了Croppie插件,Croppie的选项viewport:可以设置所裁剪图片的宽度和高度,以及类型（圆形或方形）；选项boundary是图片的外围尺寸,它还有参数mouseWheelZoom:是否支持鼠标滚轮缩放图像；showZoom：是否展示缩放条工具；update：回调函数,代码如下:

  1. $(function(){   
  2.     var $uploadCrop;   
  3.    
  4.         function readFile(input) {   
  5.              if (input.files && input.files[0]) {   
  6.                 var reader = new FileReader();   
  7.                    
  8.                 reader.onload = function (e) {   
  9.                     $uploadCrop.croppie('bind', {   
  10.                         url: e.target.result   
  11.                     });   
  12.                 }   
  13.                    
  14.                 reader.readAsDataURL(input.files[0]);   
  15.             }   
  16.             else {   
  17.                 alert("Sorry - you're browser doesn't support the FileReader API");   
  18.             }   
  19.         }   
  20.    
  21.         $uploadCrop = $('#upload-demo').croppie({   
  22.             viewport: {   
  23.                 width: 200,   
  24.                 height: 200,   
  25.                 type: 'circle'   
  26.             },   
  27.             boundary: {   
  28.                 width: 300,   
  29.                 height: 300   
  30.             }   
  31.         });   
  32.    
  33.         $('#upload').on('change', function () {    
  34.             $(".crop").show();   
  35.             readFile(this);    
  36.         });   
  37.         $('.upload-result').on('click', function (ev) {   
  38.             $uploadCrop.croppie('result', 'canvas').then(function (resp) {   
  39.                 popupResult({   
  40.                     src: resp   
  41.                 });   
  42.             });   
  43.         });   
  44.            
  45.     function popupResult(result) {   
  46.         var html;   
  47.         if (result.html) {   
  48.             html = result.html;   
  49.         }   
  50.         if (result.src) {   
  51.             html = '<img src="' + result.src + '" />';   
  52.         }   
  53.         $("#result").html(html);   
  54.     }   
  55. });  

当点击“裁剪”按钮后，再次调用Croppie的result的方法，返回一张裁剪后的图片，并显示在#result中。

标签：

给我留言