移动端原生JS上传图片(含图片压缩和方向处理、ajax上传)
基本思路
- 监听 input file 的 change 事件,获取到上传的文件信息
- 使用 FileReader 对象读取文件的 base64 格式,赋值给 img 显示
- 将图片绘制在 canvas 上,控制图片绘制的宽度,超过宽度,等比缩放。
- 利用 exif.js 获取图片的方向信息,解决 ios 上竖直照片翻转
基础代码
你只需要一个简简单单的 input 即可,当然,要显示预览图片,肯定还需要一个 img 标签。此外,原生的 input 标签比较丑,为了美观起见,一般都会把 input 透明度设置成 0,然后自定义个按钮的样式盖在上面,样式这里就不详细讲了,easy。
<input type="file" name="image" accept=“image/*” onchange='handleInputChange' id="upload-img">
<img src="" class="prev-img">
兼容性
- 安卓上不支持 multiple 属性,即不能一次多选
- 因为调用的是系统原生的文件读取,每个机型显示的页面不一样,难以测试
完整的封装 Class 如下,如果不需要压缩或者方向处理,直接注释即可。
export default class Uploader {
constructor() {
}
/**
* 把base64格式转化成Blob格式
* @param {[type]} urlData [description]
* @return {[type]} [description]
*/
convertBase64UrlToBlob(urlData) {
var arr = urlData.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
});
}
/**
* 外部调用的方法 完成图片的压缩
* @param {[type]} file 需要处理的file对象
* @param {[type]} obj 传入的配置 quality 压缩的质量
* @param {Function} callback 完成压缩之后的回调函数
* @return {[type]} [description]
*/
photoCompress(file, obj, callback) {
// 使用HTML5的FileReader开始读取File对象中的内容
let setting = obj;
var ready = new FileReader();
ready.readAsDataURL(file);
var that = this;
// 判断图片需不需要压缩
if (file.size / 1024 < 500) {
setting.quality = .9;
} else {
setting.quality = .5;
}
// 获取图片源信息 判断照片方向
ready.onload = function () {
var _this2 = this;
that.getOrientation(file).then(function(o){
// setting.orientation = EXIF.getTag(file, "Orientation");
setting.orientation = o;
var re = _this2.result;
that.canvasDataURL(re, setting, callback, file)
})
}
}
/**
* canvas绘制
* @param {[type]} result [description]
* @param {[type]} obj [description]
* @param {Function} callback [description]
* @return {[type]} [description]
*/
canvasDataURL(result, obj, callback, file) {
var img = new Image();
img.src = result;
var _this = this;
img.onload = function() {
var that = this;
var w, h, scale, quality;
scale = that.width / that.height;
if (that.width > 1200) {
w = 1200;
h = w / scale;
} else {
w = that.width;
h = that.height;
}
//生成canvas
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// 创建属性节点
var anw = document.createAttribute("width");
anw.nodeValue = w;
var anh = document.createAttribute("height");
anh.nodeValue = h;
canvas.setAttributeNode(anw);
canvas.setAttributeNode(anh);
// 调整图片方向
// console.log(obj.orientation)
if (obj.orientation && obj.orientation != "" && obj.orientation != 1) {
switch (obj.orientation) {
case 6: //需要顺时针(向左)90度旋转
_this.rotateImg(that, w, h, 'left', canvas, ctx);
break;
case 8: //需要逆时针(向右)90度旋转
_this.rotateImg(that, w, h, 'right', canvas, ctx);
break;
case 3: //需要180度旋转
_this.rotateImg(that, w, h, 'right', canvas, ctx); //转两次
_this.rotateImg(that, w, h, 'right', canvas, ctx);
break;
}
} else {
ctx.drawImage(that, 0, 0, w, h);
}
// 压缩图像质量
var base64 = canvas.toDataURL('image/jpeg', obj.quality);
// 回调函数返回base64的值
callback(base64);
}
}
getObjectURL(file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}
rotateImg(img, w, h, direction, canvas, ctx) {
//最小与最大旋转方向,图片旋转4次后回到原方向
var min_step = 0;
var max_step = 3;
//var img = document.getElementById(pid);
if (img == null) return;
//img的高度和宽度不能在img元素隐藏后获取,否则会出错
var height = h;
var width = w;
//var step = img.getAttribute('step');
var step = 2;
if (step == null) {
step = min_step;
}
if (direction == 'right') {
step++;
//旋转到原位置,即超过最大值
step > max_step && (step = min_step);
} else {
step--;
step < min_step && (step = max_step);
}
//旋转角度以弧度值为参数
var degree = step * 90 * Math.PI / 180;
// var ctx = canvas.getContext('2d');
// alert(h)
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height,w,h);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height,w,h);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0,w,h);
break;
}
}
ajaxThen(data) {
return new Promise((resolve, reject) => {
var form = new FormData();
form.append('image', data);
// console.log(data,form)
$.ajax({
url: '/home/image',
data: form,
method: 'post',
dataType: 'json',
contentType: false,
processData: false,
mimeType: "multipart/form-data",
success: function(res) {
resolve(res)
}
})
})
}
getOrientation(file) {
return new Promise((resolve, reject) => {
EXIF.getData(file, () => {
let o = EXIF.getTag(file, "Orientation");
resolve(o);
reject(o);
})
})
}
}