localresizeimg4 php,LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android...

这篇博客介绍了一种在HTML5前端进行图片压缩的方法,以提高上传大图片的效率和节省流量。通过使用localResizeIMG库,用户可以在前端完成图片压缩,然后将base64编码的压缩图片数据发送到后端。后端通过PHP处理接收到的base64数据,转换并保存为图片。这种方法显著减少了用户等待时间,改善了用户体验。
摘要由CSDN通过智能技术生成

通常压缩图片需要上传到后端,由后端处理。

但是如果要上传的图片很大,特别是手机当场拍摄下来的照片(约2M+),那样效率会很低,用户也不会愿意等待。

现在能够由前端本地压缩的话,效率将会极大的提升。

这个玩意很强大的地方就在于他可以在HTML5 前端压缩 ,大大加快了上传速度,以及节约流量。

直接上写好的demo了

HTML

/p>

"http://www.w3.org/TR/html4/loose.dtd">

New Document

var input = document.querySelector('input');

input.onchange = function () {

lrz(this.files[0], {width: 100}, function (results) {

// 你需要的数据都在这里,可以以字符串的形式传送base64给服务端转存为图片。

console.log(results);

// 发送到后端

var xhr = new XMLHttpRequest();

var data = {

base64: results.base64,

size: results.base64.length // 校验用,防止未完整接收

};

xhr.open('POST', '1.php');

xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');

xhr.onreadystatechange = function () {

if (xhr.readyState === 4 && xhr.status === 200) {

var result = JSON.parse(xhr.response);

result.error

? alert('服务端错误,未能保存图片')

//: demo_report('服务端实存的图片', result.src, result.size);

: alert('上传OK');

}

};

xhr.send(JSON.stringify(data)); // 发送base64

});

}

重要的是很多的人不知道这个工具是后端该如何处理,所以贴出php的代码:

$base64=file_get_contents("php://input"); //获取输入流

$base64=json_decode($base64,1);

$data = $base64['base64'];

preg_match("/data:image\/(.*);base64,/",$data,$res);

$ext = $res[1];

if(!in_array($ext,array("jpg","jpeg","png","gif"))){

echo json_encode(array("error"=>1));die;

}

$file=time().'.'.$ext;

$data = preg_replace("/data:image\/(.*);base64,/","",$data);

if (file_put_contents($file,base64_decode($data))===false) {

echo json_encode(array("error"=>1));

}else{

echo json_encode(array("error"=>0));

}

下载地址:

https://github.com/think2011/localResizeIMG3/releases

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值