PHP+Jcrop实现截取图片上传功能（php网页截图快照）

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

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

效果：

直接上代码

index.html

<head>

</head>

头像设置</div>

<b>

当前头像</b>

</div>

</div>

</div>

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

</p>

</div>

</div>

上传新头像</div>

</label>

</div>

</a>

</div>

</form>

提示：请选择图片裁剪区域。</div>

</div>

保存

</a>

</div>

重新选择图片</div>

</a>

</div>

</form>

</div>

(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 < byteString.length; i++) {

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

}

return new Blob([ia], {type:mimeString});

}

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;

};

</script>

</body>

</html>

upload.php

<?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";

}

网站首页 > 技术文章正文

猜你喜欢

网站首页 > 技术文章 正文

PHP+Jcrop实现截取图片上传功能（php网页截图快照）

猜你喜欢

网站首页 > 技术文章正文