通过Ajax异步进行图片上传时前端用js通过canvas画图实现图片压缩示例
通过Ajax异步进行图片上传时前端用js通过canvas画图实现图片压缩。
主要代码如下：
<script type="text/javascript">
var imgDom = document.getElementById("imgtmp"); // 获取图片对象
var canvas = document.createElement('canvas'); // 获取canvas对象
var context = canvas.getContext('2d'); // 获取canvas的上下文
canvas.width = 100;
canvas.height = 100;
context.clearRect(0, 0, canvas.width, canvas.height); // 首先先清空canvas里面的内容，以防内容叠加
context.drawImage(imgDom, 0, 0, canvas.width, canvas.height); // 画图
var base64min = canvas.toDataURL('image/jpeg', 0.92); // 格式和质量
// base64min 就是压缩后的图片base64数据
</script>后台接收文件代码参考前几篇文章
以下是demo.html 完整的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js图片压缩异步上传</title>
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<input type="file" id="imagesfile" hidefocus style="display:none">
<img src="./photo_icon.png" width="100" id="imgtmp" onclick="imagesfile.click()" />
<button id="sub_btn" >上传</button>
</body>
</html>
<script>
// 等页面加载完
window.onload = function(){
var imagesfile = document.getElementById("imagesfile");
// 监听input 标签 file属性 创建的FileUpload 对象
imagesfile.onchange = function () {
var file = imagesfile.files[0];
//判断文件大小不能超过10M ，免去服务器的压力。
if (file.size > 10 * 1024 * 1024) {
alert("上传文件必须 < 10Mb！");
return false;
}
// 获取文件
var reader = new FileReader(); // 实例化
reader.readAsDataURL(file); // 加载
reader.onload = function () { // 异步加载完成
console.log(reader);
var base64 = reader.result; // 获取 base64 DataURL
var imgDom = document.getElementById("imgtmp");
imgDom.src = base64;
/**压缩 start **/
imgDom.onload = function () {
var canvas = document.createElement('canvas'); // 获取canvas对象
var context = canvas.getContext('2d'); // 获取canvas的上下文
canvas.width = 100;
canvas.height = 100;
context.clearRect(0, 0, canvas.width, canvas.height); // 首先先清空canvas里面的内容，以防内容叠加
context.drawImage(imgDom, 0, 0, canvas.width, canvas.height); // 画图
var base64min = canvas.toDataURL('image/jpeg', 0.92); // 格式和质量
imgDom.src = base64min;
//直接上传图片
//base64_uploading(base64min);return false;
}
/**压缩 end **/
}
}
}
/**
* 点击按钮上传
*/
$('#sub_btn').on('click',function(){
var base64Data = $('#imgtmp').attr('src');
base64_uploading(base64Data);
})
/**
* Ajax上传
*/
function base64_uploading(base64Data){
$.ajax({
type: 'POST',
url: "upload.php",
data: {
'img': base64Data
},
dataType: 'json',
timeout: 50000,
success: function(data){
console.log(data);
if(data.code == 10000){
alert('上传成功');
}else{
alert('上传失败：' data.msg);
}
},
complete:function() {},
error: function(xhr, type){
alert('上传超时啦，再试试');
}
});
}
</script>
