H5 canvas实现客户端压缩图片上传

时间:2021-10-11 20:20:49

现在手机随随便便拍个照都是5、6MB,如果用户提交图片,即占服务器资源,上传速度又慢,影响用户体验度,所以一般都会对图片进行处理。
之前用php写过一个压缩图片程序,是先将图片上传到服务器之后,在服务器端进行压缩,效果不是很理想。
后来想想,还是决定要在客户端压缩,依靠H5的canvas来对图片在本地进行压缩处理,将图片处理成为base64编码,然后发送到后台,后台再做处理然后存储就好了(这样就是普通的post的提交了)。
这样比较友好些,无论是对服务器还是对用户。


html代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>压缩上传为base64</title>
<script src="../src/jquery.min.js"></script>
</head>

<body >
<form id="form1" name="form1" method="post" action="">
<input type="file" name="fileToUpload" id="fileToUpload"/> <br />
<input type="text" name="compressValue" id="compressValue" style="display:none;" /><br/>
<input type="button" id='uploadBtn' value="上传" /><br/>
</form>
</body>
<script type="text/javascript">

//图片上传change事件
$('#fileToUpload').change(function(){
uploadBtnChange();
});

//提交click事件
$('#uploadBtn').click(function(){
var preview = document.getElementById('compressValue').value;
if(preview){
$.ajax({
url:"index.php",
type: "POST",
data:{'imgBase64':preview},
dataType:'json',
success:function(json) {
alert(json);
},
error:function(){
alert('操作失败,请跟技术联系');
}
});
}
});

function uploadBtnChange(){
var scope = this;
if(window.File && window.FileReader && window.FileList && window.Blob){
//获取上传file
var filefield = document.getElementById('fileToUpload'),
file = filefield.files[0];
//获取用于存放压缩后图片base64编码
var compressValue = document.getElementById('compressValue');
processfile(file,compressValue);
}else{
alert("此浏览器不完全支持压缩上传图片");
}
}

function processfile(file,compressValue) {
var reader = new FileReader();
reader.onload = function (event) {
var blob = new Blob([event.target.result]);
window.URL = window.URL || window.webkitURL;
var blobURL = window.URL.createObjectURL(blob);
var image = new Image();
image.src = blobURL;
image.onload = function() {
var resized = resizeMe(image);
compressValue.value = resized;
}
};
reader.readAsArrayBuffer(file);
}

function resizeMe(img) {
//压缩的大小
var max_width = 1920;
var max_height = 1080;

var canvas = document.createElement('canvas');
var width = img.width;
var height = img.height;
if(width > height) {
if(width > max_width) {
height = Math.round(height *= max_width / width);
width = max_width;
}
}else{
if(height > max_height) {
width = Math.round(width *= max_height / height);
height = max_height;
}
}

canvas.width = width;
canvas.height = height;

var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);
//压缩率
return canvas.toDataURL("image/jpeg",0.92);
}
</script>
</html>

php代码:

header('Content-type:text/html;charset=utf-8');
$base64_image_content = $_POST['imgBase64'];
//echo $base64_image_content;die;
//匹配出图片的格式
if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){
$type = $result[2];
$new_file = './upload/';

//如果文件不存在,则创建
if(!file_exists($new_file))
{
mkdir($new_file, 0777, true);
}

$new_file = $new_file.time(). '.' .$type;
if (file_put_contents($new_file, base64_decode(str_replace($result[1],'', $base64_image_content)))){
echo json_encode('上传成功!');
}else{
echo json_encode('上传失败!');
}
}

注意:
1、部分代码是参照网上的,安全性不能全部保证
2、运行index.html选择要上传的图片文件点击上传
3、必须配置安装在php服务器中使用,否则有些功能不能正常使用(但压缩图片不受影响)
4、仅支持主流及ie9以上浏览器,ie9以下请单独做处理。