功能:将图片类型的 File 对象进行压缩成 Base64 位图片字符串
使用条件:需要安装 exif-js ^2.3.0
npm install exif-js --save
使用方式:
filetoDataURL({file: file,callback: base64=>{
console.log(base64)
}})
export const file2DataURL = (param) =>{
let fileInput = param;
let widthInput = param.width ? param.width : 750;
let ratioInput = param.ratio ? param.ratio : 0.75;
let callback = param.callback ? param.callback : null;
if (!window.FileReader) {
alert("请升级浏览器");
return;
}
let file = fileInput.file;
let reader = new FileReader();
/*判断图片方向*/
let orientation = null;
EXIF.getData(file, function () {
orientation = EXIF.getTag(this, 'Orientation');
reader.readAsDataURL(file);
});
reader.onloadstart = function () {
};
reader.onerror = function () {
};
reader.onload = function () {
/*创建新的图片JS对象*/
fileInput.value="";
/*创建新的图片JS对象*/
var image = new Image();
image.src = this.result;
image.onload = function () {
var canvas = document.createElement("canvas");
var scale = image.width / image.height;
if (orientation == 6) {
//右转 90
canvas.width = image.height < widthInput ? image.height : widthInput;
canvas.height = parseInt(canvas.width * scale);
canvas.getContext("2d").rotate(90 * Math.PI / 180);
canvas.getContext("2d").drawImage(image, 0, 0, image.width, image.height, 0, -canvas.width, canvas.height, canvas.width);
} else if (orientation == 8) {
//左转 90
canvas.width = image.height < widthInput ? image.height : widthInput;
canvas.height = parseInt(canvas.width * scale);
canvas.getContext("2d").rotate(-90 * Math.PI / 180);
canvas.getContext("2d").drawImage(image, 0, 0, image.width, image.height, -canvas.height, 0, canvas.height, canvas.width);
} else if (orientation == 3) {
//右转 180
canvas.width = image.width < widthInput ? image.width : widthInput;
canvas.height = parseInt(canvas.width / scale);
canvas.getContext("2d").translate(canvas.width, 0);
canvas.getContext("2d").scale(-1, 1);
canvas.getContext("2d").translate(0, canvas.height);
canvas.getContext("2d").scale(1, -1);
canvas.getContext("2d").drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
} else {
//正常
canvas.width = image.width < widthInput ? image.width : widthInput;
canvas.height = parseInt(canvas.width / scale);
canvas.getContext("2d").drawImage(image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height);
}
var imageUrl = canvas.toDataURL("image/jpeg", ratioInput);
if (callback) {
callback(imageUrl)
}
};
};
}
结合 https://www.csdcb.cn/article/293.html,Base64 类型的图片为 File
可以直接,压缩 File 类型的图片为 File
最后修改于 2021-03-24 10:48:59
如果觉得我的文章对你有用,请随意赞赏
扫一扫支付

