主要功能，使用H5的formData上传base64格式的图片，canvas压缩图片，前端样式使用weui，为方便起见，使用了jquery封装过的weui，jqweui。
话不多少，开始上代码。
前端代码，直接在jqweui官网下的demo里改的（是dist下的demo）
<!DOCTYPE html>
<html>
<head>
<title>jQuery WeUI</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
<link rel="stylesheet" href="../lib/weui.min.css">
<link rel="stylesheet" href="../css/jquery-weui.css">
<link rel="stylesheet" href="css/demos.css">
</head>
<body ontouchstart>
<header class=‘demos-header‘>
<h1 class="demos-title">Uploader</h1>
</header>
<div class="weui-cells weui-cells_form">
<div class="weui-cell">
<div class="weui-cell__bd">
<div class="weui-uploader">
<div class="weui-uploader__hd">
<p class="weui-uploader__title">图片上传</p>
<div class="weui-uploader__info">0/2</div>
</div>
<div class="weui-uploader__bd">
<ul class="weui-uploader__files" id="uploaderFiles">
<li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>
</ul>
<div class="weui-uploader__input-box">
<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../lib/jquery-2.1.4.js"></script>
<script src="../lib/fastclick.js"></script>
<script>
$(function() {
FastClick.attach(document.body);
});
</script>
<script src="../js/jquery-weui.js"></script>
<script>
$(function () {
// 允许上传的图片类型
var allowTypes = [‘image/jpg‘, ‘image/jpeg‘, ‘image/png‘, ‘image/gif‘];
// 1024KB，也就是 1MB
var maxSize = 2048 * 2048;
// 图片最大宽度
var maxWidth = 10000;
// 最大上传图片数量
var maxCount = 6;
$(‘#uploaderInput‘).on(‘change‘, function (event) {
var files = event.target.files;
//console.log(files);return false;
// 如果没有选中文件，直接返回
if (files.length === 0) {
return;
}
for (var i = 0, len = files.length; i < len; i++) {
var file = files[i];
var reader = new FileReader();
// 如果类型不在允许的类型范围内
if (allowTypes.indexOf(file.type) === -1) {
$.alert("该类型不允许上传！", "警告！");
continue;
}
if (file.size > maxSize) {
//$.weui.alert({text: ‘图片太大，不允许上传‘});
$.alert("图片太大，不允许上传", "警告！");
continue;
}
if ($(‘.weui-uploader__file‘).length >= maxCount) {
$.weui.alert({text: ‘最多只能上传‘ + maxCount + ‘张图片‘});
return;
}
reader.readAsDataURL(file);
reader.onload = function (e) {
//console.log(e);
var img = new Image();
img.src = e.target.result;
img.onload = function () {
// 不要超出最大宽度
var w = Math.min(maxWidth, img.width);
// 高度按比例计算
var h = img.height * (w / img.width);
var canvas = document.createElement(‘canvas‘);
var ctx = canvas.getContext(‘2d‘);
// 设置 canvas 的宽度和高度
canvas.width = w;
canvas.height = h;
ctx.drawImage(img, 0, 0, w, h);
var base64 = canvas.toDataURL(‘image/jpeg‘,0.8);
//console.log(base64);
// 插入到预览区
var $preview = $(‘<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url(‘ + img.src + ‘)"><div class="weui-uploader__file-content">0%</div></li>‘);
$(‘#uploaderFiles‘).append($preview);
var num = $(‘.weui-uploader__file‘).length;
$(‘.weui-uploader__info‘).text(num + ‘/‘ + maxCount);
var formData = new FormData();
formData.append("images", base64);
//console.log(img.src);
$.ajax({
url: "savetofile.php",
type: ‘POST‘,
data: formData,
contentType:false,
processData:false,
success: function(data){
$preview.removeClass(‘weui-uploader__file_status‘);
$.toast("上传成功", function() {
//console.log(‘close‘);
});
},
error: function(xhr, type){
alert(‘Ajax error!‘)
}
});
};
};
}
});
});
</script>
</body>
</html>
上述代码中
var base64 = canvas.toDataURL(‘image/jpeg‘,0.8);
只有这个函数的第一个参数为image/jpeg是压缩功能才可正常使用，第二个参数为压缩比例
php代码，对base64格式的图片解码并保存
<?php
$imgData = $_REQUEST[‘images‘];
if (preg_match(‘/^(data:\s*image\/(\w+);base64,)/‘, $imgData, $result)){
$type = $result[2];
$rand = rand(1000,9999);
$new_file = ‘img/‘.$rand.‘.‘.$type;
if (file_put_contents($new_file, base64_decode(str_replace($result[1], ‘‘, $imgData)))){
echo $type;
}
}
?>
时间： 2024-07-31 14:31:31