手机拍照并把图片设定特定尺寸,在网上找了一些资料,可以使用html5原生的方式 也可以使用插件,现在分别按2种方式实现
原生的方式主要用到FileReader
FileReader的实例拥有4个方法,其中3个用来读取文件,另一个是中断文件,无论读取成功还是失败,方法并不会返回结果,而是存储在result属性中
1、abort 参数none 中断读取
2、readAsBinaryString 参数file 将文件读取为二进制码
3、readAsDataURL 参数file 将文件读取为DataURL
4、readAsText file,[encoding] 将文件读取为文本 该方法有2个参数,其中第二个参数是文本的编码方式,默认值为utf-8
FileReader 包含一套完整的事件模型,用于捕获读取文件时的状态
1、onabort 读取中断时触发
2、onerror 出错时触发
3、onload 文件读取成功完成时触发
4、onloadend 读取完成触发,无论成功与失败
5、onloadstart 读取开始时触发
6、onprogress 读取中触发
fr.onload = function() {
this.result; 读取的结果存储在result属性中
};
<body>
<div id="test-file-info"></div>
<div id="test-image-preview"></div>
<form action="">
<input id="test-image-file" type="file" capture="camera" accept="image/*" />
</form>
</body>
<style>#test-image-preview {
width: 100%;
height: 200px;
border: 1px solid #ff0000;
overflow: hidden;
}
#test-image-preview canvas {
width: 100%;
}
</style>
注意:关于画布设置为100%,只是显示的大小,并不是画布的实际大小
<script>
window.onload = function() {
var fileInput = document.getElementById('test-image-file');
var info = document.getElementById('test-file-info');
var preview = document.getElementById('test-image-preview');
//var img = document.createElement("img");
//preview.appendChild(img);
fileInput.addEventListener('change', function(e) {
console.log('change...');
preview.innerHTML = "";
//preview.style.backgroundImage='';
if (!fileInput.value) {
info.innerHTML = '没有选择文件';
return;
}
//var file = fileInput.files[0];
var file = e.target.files[0];
var fontSize = file.size / 1024 / 1024;
console.log(file.type);
// info.innerHTML = '文件:' + file.name + '<br>'+'大小:'+ fontSize.toFixed(2) + "M"+'<br>'+'修改:'+file.lastModifiedDate;
if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
alert('不是有效的图片文件!');
return;
}
//FileReader 实例读取成功时,把读取的结果赋值给图片的src
var reader = new FileReader();
reader.onload = function(e) {
console.log('reader.onload');
var data = e.target.result; //也可以写成var data = this.result;data指base64格式URL
compress(data);
function compress(data) {
var img = new Image();
img.src = data;
//preview.appendChild(img);
var maxW = 640;
img.onload = function() {
var cvs = document.createElement('canvas'),
ctx = cvs.getContext('2d');
if (img.width > maxW) {
img.height = maxW / img.width * img.height;
img.width = maxW;
//img.height = maxH;
}
cvs.width = img.width;
cvs.height = img.height;
ctx.clearRect(0, 0, cvs.width, cvs.height);
ctx.drawImage(img, 0, 0, img.width, img.height);
//通过 cvs.toDataURL(‘image/jpeg’,0.5)就可以获取到base64编码值,
//然后你就可以按照传统的POST或者AJAX方式处理了。第二个参数是压缩比
var dataUrl = cvs.toDataURL('image/jpeg', 1);
preview.appendChild(cvs);
}
//document.body.appendChild(cvs);
// 上传略
$.post("server.php", { img: e.target.result }, function(ret) {}
}
// preview.style.backgroundImage='url('+ data +')';
///FileReader 实例 把文件读取为DataURL格式,才能在图片预览中展示
}
reader.readAsDataURL(file);
});
};
</script>
后台处理
$base64 = $_POST['img'];
$IMG = base64_decode( $base64 );
file_put_contents('1.png', $IMG );
也可使用localResizeIMG4,使用比较方便,感觉处理后的图片也比较清晰
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>文件api</title>
<style>
#previewImgDiv {
width: 200px;
height: 200px;
background: #f2f2f2;
overflow: hidden;
}
#previewImgDiv img {
width: 100%;
}
.file-input {
position: relative;
width: 100px;
}
.file-input button {
width: 100%;
height: 28px;
line-height: 28px;
color: #fff;
background: #0fd5d3;
border: none;
}
.file-input button:hover {
background: #07b9b7;
}
.file-input button:focus {
outline: none;
}
.file-input input {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.file-input input:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div id="test-file-info"></div>
<div id="previewImgDiv">图片预览</div>
<div class="file-input">
<button class="btn btn-primary file-inner-btn">
文件上传
<i class="ion-ios-cloud-upload-outline">
</i>
</button>
<input type="file" capture="camera" accept="image/*" name="logo" id="file">
</div>
</body>
<script src="dist/lrz.bundle.js"></script>
<script type="text/javascript">
document.querySelector('input').addEventListener('change', function() {
// this.files[0] 是用户选择的文件
lrz(this.files[0], { width: 500 })
.then(function(rst) {
// 把处理的好的图片给用户看看呗(可选)
var imgDiv = document.getElementById('previewImgDiv');
var img = new Image();
img.src = rst.base64; //base64字符串
imgDiv.innerHTML = "";
imgDiv.appendChild(img);
// img.onload = function () {
// document.body.appendChild(img);
// };
return rst;
})
.then(function(rst) {
// 这里该上传给后端啦
/* ==================================================== */
// 原生ajax上传代码,所以看起来特别多,但绝对能用
// 其他框架,例如jQuery处理formData略有不同,请自行google,baidu。
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:5000/');
xhr.onload = function() {
if (xhr.status === 200) {
// 上传成功
} else {
// 处理其他情况
}
};
xhr.onerror = function() {
// 处理错误
};
xhr.upload.onprogress = function(e) {
// 上传进度
var percentComplete = ((e.loaded / e.total) || 0) * 100;
};
// 添加参数
rst.formData.append('fileLen', rst.fileLen);
rst.formData.append('xxx', '我是其他参数');
// 触发上传
xhr.send(rst.formData);
/* ==================================================== */
return rst;
})
.catch(function(err) {
// 万一出错了,这里可以捕捉到错误信息
// 而且以上的then都不会执行
alert(err);
})
.always(function() {
// 不管是成功失败,这里都会执行
});
});
</script>
</html>
上面的样式
#previewImgDiv{width:200px;height:200px;background:#f2f2f2;overflow:hidden;}
#previewImgDiv img{width:100%;}
只是显示的大小,并不是图片实际大小,实际大小 lrz(this.files[0], {width: 500})这里面设置的。