168 lines
5.4 KiB
JavaScript
168 lines
5.4 KiB
JavaScript
import EXIF from 'exif-js' //获取拍照时的信息的库（角度），用于调正图片展示角度
|
||
import imageConversion from 'image-conversion' //图片压缩、转换处理库
|
||
|
||
|
||
|
||
/**
|
||
* 压缩文件函数
|
||
* 传入图片-压缩后的尺寸（kb）-压缩率
|
||
* 返回压缩后的文件
|
||
* @param {file} imageFile
|
||
* @param {number} compressSize
|
||
* @param {number} quality
|
||
*/
|
||
export function JudgeCompress(imageFile, compressSize, quality = 0.99) { //传入图片文件-规定压缩后的尺寸（kb）-压缩率
|
||
return new Promise(function (resolve,reject) {
|
||
if(imageFile.size < 100 * 1024) { //如果图片小于规定尺寸，则直接返回
|
||
resolve(imageFile)
|
||
return
|
||
}
|
||
imageConversion.compressAccurately(imageFile,{size:compressSize,accuracy:quality,scale:0.5}).then(res =>{ //压缩函数
|
||
resolve(res)
|
||
})
|
||
})
|
||
}
|
||
|
||
|
||
|
||
/**
|
||
* 图片文件转base64 DataUrl
|
||
* @param {file} file
|
||
*/
|
||
export function FiletoDataURL(file){
|
||
return new Promise((resolve,reject) => {
|
||
imageConversion.filetoDataURL(file).then(res => {
|
||
resolve(res)
|
||
})
|
||
})
|
||
}
|
||
|
||
|
||
|
||
/**
|
||
* 判断文件类型是否为image
|
||
* @param {file} file
|
||
*/
|
||
export function CheckFile(file) {
|
||
if (!/image\/\w+/.test(file.type)) {
|
||
return false;
|
||
}
|
||
return file;
|
||
}
|
||
|
||
|
||
|
||
/**
|
||
* 旋转图片总体函数
|
||
* 传入文件，返回旋转后的文件
|
||
* @param {file} imageFile
|
||
*/
|
||
export function RotateImage(imageFile) {
|
||
return new Promise((resolve,reject)=>{
|
||
imageConversion.filetoDataURL(imageFile).then(res =>{ //把文件转成图片格式用于旋转
|
||
var image = new window.Image();
|
||
image.src = res
|
||
image.onload = function () {
|
||
// 旋转图片
|
||
let newImage = handleRotate(image)
|
||
imageConversion.dataURLtoFile(newImage.src).then(res => {
|
||
resolve(res) //返回的是file（文件）
|
||
})
|
||
}
|
||
})
|
||
})
|
||
// 使用如上filetoDataURL插件方法实现文件转url 而 替代本手写方法 by:luqiang 20191012
|
||
// var reader = new FileReader();
|
||
// reader.onload = function(e){
|
||
// }
|
||
// reader.readAsDataURL(imageFile); //先挂载onload方法再绑定read事件
|
||
}
|
||
|
||
/**
|
||
* 处理旋转函数，传入图片，返回旋转正确的图片
|
||
* @param {img} image
|
||
*/
|
||
function handleRotate(image){ //处理旋转的函数
|
||
var width = image.width;
|
||
var height = image.height;
|
||
var canvas = document.createElement("canvas")
|
||
var ctx = canvas.getContext('2d');
|
||
var newImage = new Image();
|
||
//旋转图片操作
|
||
EXIF.getData(image, function () {
|
||
var orientation = EXIF.getTag(this, 'Orientation');
|
||
let imageDate = null
|
||
switch (orientation) {
|
||
//正常状态
|
||
case 1:
|
||
// alert('旋转0°');
|
||
newImage.src = image.src;
|
||
break;
|
||
//旋转90度
|
||
case 6:
|
||
// alert('旋转90°');
|
||
canvas.height = width;
|
||
canvas.width = height;
|
||
ctx.rotate(Math.PI / 2);
|
||
ctx.translate(0, -height);
|
||
ctx.drawImage(image,0,0)
|
||
imageDate = canvas.toDataURL('image/jpeg', 1)
|
||
newImage.src = imageDate;
|
||
break;
|
||
//旋转180°
|
||
case 3:
|
||
// alert('旋转180°');
|
||
canvas.height = height;
|
||
canvas.width = width;
|
||
ctx.rotate(Math.PI);
|
||
ctx.translate(-width, -height);
|
||
ctx.drawImage(image,0,0)
|
||
imageDate = canvas.toDataURL('image/jpeg', 1)
|
||
newImage.src = imageDate;
|
||
break;
|
||
//旋转270°
|
||
case 8:
|
||
// alert('旋转270°');
|
||
canvas.height = width;
|
||
canvas.width = height;
|
||
ctx.rotate(-Math.PI / 2);
|
||
ctx.translate(-height, 0);
|
||
ctx.drawImage(image, -810,0) //????安卓要-810？？？？
|
||
// ctx.drawImage(image)
|
||
imageDate = canvas.toDataURL('image/jpeg', 1)
|
||
newImage.src = imageDate;
|
||
break;
|
||
//undefined时不旋转
|
||
case undefined:
|
||
// alert('旋转0°');
|
||
newImage.src = image.src;
|
||
break;
|
||
default:
|
||
newImage.src = image.src;
|
||
break;
|
||
}
|
||
}
|
||
);
|
||
return newImage;
|
||
}
|
||
|
||
|
||
|
||
// 压缩图片函数 --> by:luqiang 20191012 使用imageConversion库代替手写操作以精准控制压缩后的文件尺寸
|
||
// function Compress(image, quality) {
|
||
// var canvas = document.createElement('canvas')
|
||
// var ctx = canvas.getContext('2d');
|
||
// var width = image.width;
|
||
// var height = image.height;
|
||
// canvas.width = width;
|
||
// canvas.height = height;
|
||
// ctx.drawImage(image, 0, 0, width, height);
|
||
// //压缩操作
|
||
// var imageData = canvas.toDataURL("image/jpeg", quality);
|
||
// var imageLength = image.src.length;
|
||
// console.log("压缩前：" + imageLength);
|
||
// console.log("压缩后：" + imageData.length,imageData);
|
||
// console.log("压缩率：" + ~~(100 * (imageLength - imageData.length) / imageLength) + "%");
|
||
// return imageData;
|
||
// }
|