基于jQuery和cropper点击头像上传并预览裁剪图片

使用jquery上传前，预览图片，裁剪，示例使用php接收上传的文件，并且保存为裁剪后的图片。不需要上传后再裁剪图片，只需要本地裁剪好即可，裁剪的时候也可以旋转图片。裁剪控件使用了，cropper。

html代码

 
 
 
 

 
 
 
 
 
 
 
 



 

 

			 
			    选择要上传的文件
		   
		   
 

  

   


   

  


  
   

    
    
    
   
  
 

对应的javascript代码:

  本文使用了cropper，裁剪图片

 $(document).ready(function($) {
   'use strict';
   // cropper初始化
   var $image = $('#image');
    //调整cropper参数，在这里调整
   $image.cropper({
    aspectRatio: '1',
    autoCropArea: 0.8,
    viewMode: 2,
    preview: '.up-after',

   });


   // 图片文件变化
   var $inputImage = $('#inputImage');
   var URL = window.URL || window.webkitURL;
   var blobURL;

   if (URL) {
    $inputImage.change(function() {
     var files = this.files;
     var file;

     if (files && files.length) {
      file = files[0];

      if (/^image\/\w+$/.test(file.type)) {
       blobURL = URL.createObjectURL(file);
       $image.one('built.cropper', function() {
    // Revoke when load complete
    URL.revokeObjectURL(blobURL);
       }).cropper('reset').cropper('replace', blobURL);
       $inputImage.val('');
      } else {
       window.alert('Please choose an image file.');
      }
     }

    });
   } else {
    $inputImage.prop('disabled', true).parent().addClass('disabled');
   }

   //绑定上传事件
   $('#upImgBtn').on('click', function() {
    var imgSrc = $image.attr("src");
    if (imgSrc == "") {
     alert("没有选择上传的图片");
     return false;
    }
    var url = $(this).attr("url");
    var canvas = $("#image").cropper('getCroppedCanvas');
    var data = canvas.toDataURL(); 
    $.ajax({
     url: 'up.php',
     dataType: 'json',
     type: "POST",
     data: {
      "image": data.toString()
     },
     success: function(data, textStatus) {
      alert('上传成功')
     },
     error: function() {
      alert('上传失败')
     },
     complete: function(xhr, stat) {}
    });

   });

  });

function rotateImg(d) {
  $("#image").cropper('rotate', d);
}

上传效果预览

裁剪好后，通过upImgBtn按钮上传文件，这里上传的文件为经过base64编码的图像，可以通过php或者java接受上传的文件，

完整的示例，请参考。

    点击下载