功能:将图片类型的 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
如果觉得我的文章对你有用,请随意赞赏
扫一扫支付
上一篇