jQuery implements image upload and cropping plug-in Croppie

jQuery implements image upload and cropping plug-in Croppie_jquery

WBOY

Release： 2016-05-16 15:28:58

Original

2717 people have browsed it

In many applications, you need to upload local images and then crop them appropriately to meet the website's image size requirements. The most common ones are applications where each user system requires users to upload and crop avatars. Today I will introduce to you an image uploading and cropping plug-in based on HTML5 and jQuery, it is called Croppie.

Operation rendering:

HTML
First we load the relevant js and css files into the head.

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

Copy after login

Next we place an image upload button on the page. We can use CSS to convert the file selection control of type="file" into a button style. After selecting the image, upload the image and call the cropping plug-in Croppie in #upload-demo. #result is used to display the cropped image.

<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>

Copy after login

CSS
Using the following CSS code, we perfectly convert the file selection control into a button style. In fact, we set the transparency of type="file" to 0, and then overlap it with the button. In addition, we first set the image cropping area .crop to invisible and then display it after selecting the file.

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}

Copy after login

jQuery
First, the FileReader API of HTML5 is used to read the local file, and then $('#upload-demo').croppie() calls the Croppie plug-in. Croppie's option viewport: You can set the width and height of the cropped image, as well as the type (circle or square); the option boundary is the peripheral size of the image. It also has parameters mouseWheelZoom: whether to support mouse wheel zooming of images; showZoom: whether to display the zoom bar tool; update: callback function.

$(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); 
  } 
});

Copy after login

After clicking the "Crop" button, call Croppie's result method again to return a cropped picture and display it in #result.

The above is the main process of jQuery implementing image uploading and cropping. I hope it will be helpful for everyone to learn image uploading and cropping technology.