上传图片的时候使用 base64 编码的照片会比原照片大，那么上传的时候进行压缩就非常有必要的。本篇主要内容主要是 前端在图片上传的时候图片发生旋转、压缩问题的解决方案。旋转的解决方案是获取图片的 Orientation 变量（香菊网）
旋转：
当你使用手机的时候有时候图片里面会存一个 Orientation 字段，
旋转角度 参数值
0° 1
90° 6
-90° 8
180° 3
参数为 1 的时候显示正常，那么在这些横拍显示正常，即 Orientation = 1 的手机上，竖拍的参数为 6。
当然不是每个图片都会有这个属性的
想要获取 Orientation 参数，可以通过 exif.js 库来操作。exif.js 功能很多，
npm install exif-js --save
<script src="vendors/exif-js/exif-js"></script>exif.js 获取 Orientation ：
let file = inputDOM.files[0]
EXIF.getData(file, function() {
var Orientation = EXIF.getTag(this, 'Orientation');
});旋转画布
ctx.rotate(angle);压缩：
手机拍出来的照片太大，而且使用 base64 编码的照片会比原照片大，那么上传的时候进行压缩就非常有必要的。现在的手机像素这么高，拍出来的照片宽高都有几千像素，用 canvas 来渲染这照片的速度会相对比较慢。
其一根据 缩放尺寸进行压缩
image.onload = function () {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
data = '',
scales = 0.5;
let imgWidth = Math.ceil(this.width * scales);
let imgHeight = Math.ceil(this.height * scales);
canvas.width = imgWidth;
canvas.height = imgHeight;
context.drawImage(this, 0, 0, imgWidth, imgHeight);
}其二根据 图片质量压缩
var data = canvas.toDataURL('image/jpeg', 0.1);
console.log('压缩后')
console.log(data)文件全部内容
<!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>上传图片压缩</title>
</head>
<body>
<input type="file" name="upimg" id='up'>
<div class="box">
<img src="" alt="" id="upimg">
<img src="" alt="" id="upimg2">
</div>
</body>
<script src="./exif.js"></script>
<script>
window.onload = () => {
let upDOM = document.getElementById('up')
upDOM.addEventListener('change', (e) => {
console.log(e)
console.log(upDOM.files[0])
var reader = new FileReader();
reader.readAsDataURL(upDOM.files[0]);
let Orientation = '';
if (upDOM.files[0]) {
EXIF.getData(upDOM.files[0], function () {
Orientation = EXIF.getTag(this, 'Orientation');
});
}
reader.onload = function (ie) {
var re = this.result;
console.log('压缩前')
console.log(re)
console.log('旋转参数', Orientation)
var image = document.getElementById('upimg');
var image2 = document.getElementById('upimg2');
image.onload = function () {
var canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
data = '',
scales = 0.5;
let imgWidth = Math.ceil(this.width * scales);
let imgHeight = Math.ceil(this.height * scales);
// 手机拍的图片会发生旋转
if (Orientation && Orientation != 1) {
switch (Orientation) {
case 6: // 旋转90度
canvas.width = imgHeight;
canvas.height = imgWidth;
context.rotate(Math.PI / 2);
context.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
break;
case 3: // 旋转180度
canvas.width = imgWidth;
canvas.height = imgHeight;
context.rotate(Math.PI);
context.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);
break;
case 8: // 旋转-90度
canvas.width = imgHeight;
canvas.height = imgWidth;
context.rotate(3 * Math.PI / 2);
context.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);
break;
}
} else {
canvas.width = imgWidth;
canvas.height = imgHeight;
context.drawImage(this, 0, 0, imgWidth, imgHeight);
}
var data = canvas.toDataURL('image/jpeg', 0.1);
// 压缩完成执行回调
console.log('压缩后')
console.log(data)
image2.setAttribute('src', data);
};
image.setAttribute('src', this.result);
}
})
}
</script>
</html>标签： 前端front软件softH5部分HTML&CSS