拍照
拍照可以直接使用input標簽,并加上capture="camera"，點擊input的時候就會直接打開相機
<input type="file" accept="image/*" capture="camera" @change="upload">
但是在部分低版本的iOS系統(tǒng)上，capture="camera"不會生效，會有相冊和拍照讓你選擇
獲取圖片
拍照完成后會觸發(fā)change事件，upload方法的參數(shù)是個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();
// 創(chuàng)建讀取文件對象
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;
// 設置最大允許寬高,根據(jù)需求自己設置,值越大,圖片大小越大
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第一個參數(shù)是回調函數(shù)，第二個參數(shù)是要轉換的格式，第三個是轉換的圖片的質量0~1
canvas.toBlob(function (result) {
// 用回調函數(shù)將處理的結果返回出去
fn(result);
}, "image/jpg", 0.9);
};
},
最后調用compress方法即可
upload (event) {
let file = event.target.files[0]
compress(file,(files) => {
let finalFile = files //最后得到壓縮后的file對象
})
}
