拍照
拍照可以直接使用input标签,并加上capture="camera"，点击input的时候就会直接打开相机
<input type="file" accept="image/*" capture="camera" @change="upload">
但是在部分低版本的iOS系统上，capture="camera"不会生效，会有相册和拍照让你选择
获取图片
拍照完成后会触发change事件，upload方法的参数是个event事件对象
event.target.files[0]就是你拍照后的图片file对象
upload (event) {
let file = event.target.files[0]
}
对图片压缩处理
// 因为公司的需求是拍照时不能让用户选择图片，iOS部分版本不支持，所以在iOS上只能用微信jssdk的拍照功能，拍照后只能获取到图片的dataURL，要将其转换成file对象，传入ios为true时表示在iOS上特殊处理
function compress = (files, fn, ios) => {
// 对不支持canvas上的toBlob方法的浏览器兼容处理
if (!HTMLCanvasElement.prototype.toBlob) {
Object.defineProperty(HTMLCanvasElement.prototype, "toBlob", {
value: function (callback, type, quality) {
let dataURL = this.toDataURL(type, quality).split(",")[1];
setTimeout(function () {
let binStr = atob(dataURL);
let len = binStr.length;
let arr = new Uint8Array(len);
for (let i = 0; i < len; i++) {
arr[i] = binStr.charCodeAt(i);
}
callback(new Blob([arr], { type: type || "image/png" }));
});
}
});
}
let file = files;
if (ios === true) {
function dataURLtoFile(dataurl) {
let arr = dataurl.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 });
}
file = dataURLtoFile(file);
}
let Orientation = null;
let img = new Image();
// 创建读取文件对象
let render = new FileReader();
// 找到canvas,准备画图
let canvas = document.createElement("canvas");
let context = canvas.getContext("2d");
if (file.type.indexOf("image") !== -1) {
// 读取file文件,得到的结果为base64位
render.readAsDataURL(file);
}
// 要对图片旋转，需要获取当前图片的信息，需要引入exif插件，可以直接在入口index.html用CDN引入
// <script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.js"></script>
// 获取图片信息
EXIF.getData(file, function () {
Orientation = EXIF.getTag(this, "Orientation");
});
render.onload = function (result) {
// 把读取到的base64图片设置给img的src属性
let src = render.result;
img.src = src;
};
img.onload = function () {
// 加载完毕后获取图片的原始尺寸
let origin_width = this.width;
let origin_height = this.height;
// 设置最大允许宽高,根据需求自己设置,值越大,图片大小越大
let max_width = 400;
let max_height = 400;
// 最终宽高
let imgWidth = origin_width;
let imgHeight = origin_height;
if (origin_width > max_width || origin_height > max_height) {
if (origin_width / origin_height > max_width / max_height) {
imgWidth = max_width;
imgHeight = Math.round(max_width * (origin_height / origin_width));
} else {
imgHeight = max_height;
imgWidth = Math.round(max_height * (origin_width / origin_height));
}
}
canvas.width = imgWidth;
canvas.height = imgHeight;
if (Orientation && Orientation != 1) {
switch (Orientation) {
case 6: // 旋转90度
canvas.width = imgHeight;
canvas.height = imgWidth;
context.rotate(Math.PI / 2);
// (0,-imgHeight) 从旋转原理图那里获得的起始点
context.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
break;
case 3: // 旋转180度
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 {
context.drawImage(this, 0, 0, imgWidth, imgHeight);
}
// 此处toBlob方法在iOS上有兼容问题，已做处理
// toBlob第一个参数是回调函数，第二个参数是要转换的格式，第三个是转换的图片的质量0~1
canvas.toBlob(function (result) {
// 用回调函数将处理的结果返回出去
fn(result);
}, "image/jpg", 0.9);
};
},
最后调用compress方法即可
upload (event) {
let file = event.target.files[0]
compress(file,(files) => {
let finalFile = files //最后得到压缩后的file对象
})
}
