手机拍照预览2种实现方式 原
手机拍照并把图片设定特定尺寸，在网上找了一些资料，可以使用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})这里面设置的。
(adsbygoogle = window.adsbygoogle || []).push({});
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017/04/19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
对象存储
对象存储（Cloud Object Storage，COS）是由腾讯云推出的无目录层次结构、无数据格式限制，可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限，无需分区管理，适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。