一、功能和问题解析
-
图片上传，在移动端可以使用input为file，通过base64上传图片
-
移动端file有兼容上的问题
-
移动端端图片都是几M，必须压缩
二、功能的实现和问题的解决
-
初始页面布局
<head>
<meta charset="utf-8">
<style>
.add{
width: 100%;
height: 100%;
text-align: center;
border: 1px solid #ccc;
}
.img-box{
position: relative;
display: inline-block;
margin: 10px 0px;
width: 80px;
height: 80px;
color: #999;
}
.upload{
position: absolute;
top: 0;
left: 0;
padding: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.add span{
display: inline-block;
margin-top: 28px;
}
.img-box img{
display: none;
width: 100%;
height: 80px;
object-fit: cover;
}
</style>
</head>
<div>
<label for="upload">照片</label>
<div class="img-box">
<div class="add" id="add"><span>+</span></div>
<img src="" id="pic"/>
<input type="file" id="upload" class="upload" accept="image/*" multiple />
</div>
</div>-
移动端file有兼容上的问题的解决
<input type="file" id="upload" class="upload" accept="image/*" multiple />这样可以解决点击调用相册的问题
-
上传图片、预览并且图片压缩
-
方法为：把图片变成base64位，使用canvas进行压缩，不过在ios中图片大于2000000像素就无法使用canvas压缩，就需要瓦片绘制。
var upload = document.getElementById('upload'),//上传
pic = document.getElementById('pic'),//图片
addBox = document.getElementById('add'),//空图片样式
maxsize = 100* 1024,//超过100k进行压缩
minSrc = '';//
if (typeof(FileReader) === 'undefined') {
alert("抱歉，你的浏览器不支持 FileReader，请使用现代浏览器操作！");
upload.setAttribute('disabled', 'disabled');
}
upload.addEventListener('change', function(){
addBox.style.display = 'none';
pic.style.display = 'block';
var file = this.files[0],
result = '',
reader = new FileReader();
if(file){
pic.setAttribute('src','loading.gif');
}
reader.readAsDataURL(file);
reader.onload = function(e){
var v = this.result;//获取到base64的图片
img = new Image();
img.src = v;
//大于100k图片进行压缩
if(v.length>=maxsize){
img.onload = function(){
minSrc = compress(img,600,100);
pic.setAttribute('src',minSrc);
//ajax minSrc
}
}else{
pic.setAttribute('src',v);
//ajax v
}
}
});
function compress(sourceImg,proportion,quality){
var area = sourceImg.width * sourceImg.height,//源图片的总大小
height = sourceImg.height * proportion,
width = sourceImg.width * proportion,
compressCvs = document.createElement('canvas');//压缩的图片画布
//压缩的图片配置宽高
compressCvs.width = width;
compressCvs.height = height;
var compressCtx = compressCvs.getContext("2d");
//解决ios 图片大于2000000像素无法用drawImage的bug
if(area > 2000000 && navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
//瓦片绘制
var smallCvs = document.createElement("canvas"),
smallCtx = smallCvs.getContext("2d"),
count = Math.ceil(area / 1000000),//分割的数量
cvsWidth = width/count,//每个小canvas的宽度
picWidth = sourceImg.width/count;//分割成小图片的宽度
smallCvs.height = compressCvs.height;
smallCvs.width = width/count;
//拼凑成大的canvas
for(var i = 0;i < count;i++){
smallCtx.drawImage(sourceImg,i*picWidth,0,picWidth,sourceImg.height,0,0,cvsWidth,height);
compressCtx.drawImage(smallCvs,i*cvsWidth,0,cvsWidth,height);
}
}else{
compressCtx.drawImage(sourceImg,0,0,sourceImg.width,sourceImg.height,0,0,width,height);
}
var newUrl = compressCvs.toDataURL('image/jpeg',quality/100);
return newUrl;
}