PHP＋Jcrop实现截取图片上传功能

之前用Jcrop实现头像上传的功能的时候。有个缺点，是先把原始图片上传，再在页面上显示出来，供用户截取。这么以来不管用户是否保存修改头像的操作，都会执行一个上传操作并保存图片。

改进：把上传的图片转成base64格式的图片显示在页面上，仅当用户截取头像点击保存的时候再执行上传操作。

效果：

直接上代码index.html

请点击此处输入图片描述

头像设置

当前头像

仅支持上传JPG格式的文件。

上传新头像

提示：请选择图片裁剪区域。

保存

重新选择图片

(function(){

$("#avatar1").change(function() {

var img = $(".img-responsive");

var reader = new FileReader();

reader.readAsDataURL(this.files[0]);

reader.onload = function (e) {

img.attr('src',this.result);

$("#form1").css('display','none');

$("#form2").css('display','block');

$('.img-responsive').Jcrop({

boxWidth:600,

boxHeight:300,

aspectRatio: 1,

onSelect: updateCoords,

});

}

});

$(".webuploader-pick").click(function() {

location.reload();

});

})()

$("#commit").click(function(){

var avatarForm = document.getElementById('form2');

var formData = new FormData(avatarForm);

$(".img-responsive").each(function(){

var blob = dataURItoBlob(this.src); // 上一步中的函数

formData.append("avatar", blob, 'avatar.jpg');

});

$.ajax({

url: 'upload.php',

type: 'post',

processData: false,

contentType: false,

// dataType: 'json',

data: formData,

success: function(data){

location.reload();

},

error: function(){

alert("error");

}

});

})

function dataURItoBlob(base64Data) {

var byteString;

if (base64Data.split(',')[0].indexOf('base64') >= 0)

byteString = atob(base64Data.split(',')[1]);

else

byteString = unescape(base64Data.split(',')[1]);

var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];

var ia = new Uint8Array(byteString.length);

for (var i = 0; i

ia[i] = byteString.charCodeAt(i);

}

return new Blob([ia], );

}

function updateCoords(c)

{

$('#x').val(c.x);

$('#y').val(c.y);

$('#w').val(c.w);

$('#h').val(c.h);

};

function checkCoords()

{

if (parseInt($('#w').val())) return true;

alert('Please select a crop region then press submit.');

return false;

};

upload.php

if ($_SERVER['REQUEST_METHOD']=="POST") {

// 保存图片

$image = $_FILES['avatar'];

if($image['error'] == UPLOAD_ERR_OK){

$dest='img/avatar_crop.jpg';

move_uploaded_file($image['tmp_name'],$dest);

}

$targ_w = $targ_h = 160;

$jpeg_quality = 90;

$src = 'img/avatar_crop.jpg';

$img_r = imagecreatefromjpeg($src);

$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

imagecopyresampled($dst_r, $img_r, 0, 0, $_POST['x'], $_POST['y'], $targ_w, $targ_h, $_POST['w'], $_POST['h']);

imagejpeg($dst_r, 'img/avatar.jpg', $jpeg_quality);

echo "success";

}