前端开发者| 软件开发小公司有前端几个 |
| 前端开发软件快捷键 |
| 前端开发软件ws |
一、功能和问题解析
1、图片上传，在移动端可以使用input为file，通过base64上传图片
2、移动端file有兼容上的问题
3、 移动端端图片都是几M，必须压缩
二、功能的实现和问题的解决
1、 移动端file有兼容上的问题的解决
<input type=”file” id=”upload” class=”upload” accept=”image/*” multiple />
这样可以解决点击调用相册的问题
2、上传图片、预览并且图片压缩
方法为：把图片变成base64位，使用canvas进行压缩，不过在ios中图片大于2000000像素就无法使用canvas压缩，就需要瓦片绘制。
代码如下
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
<title>Document</title>
<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>
<body>
<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>
<script>
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, 0.8, 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
}
</script>
</body>
</html>
| 软件开发前端工资待遇 |
| 前端_安全_软件开发 |
| web前端中文版开发软件下载 |
» 本文来自：前端开发者 » 《前端开发移动端上传预览压缩图片》
» 本文链接地址：https://www.rokub.com/6896.html
» 您也可以订阅本站：https://www.rokub.com
评论前必须登录！
注册