DataURL、Blob、File、Image

DataURL、Blob、File、Image之间的关系与转换

var utils = {
    /**
     * @description canvas 转 dataURL
     * @param { Object } canvas 对象
     * @param { Object } format 文件格式（默认为 image/jpeg）
     * @param { Object } quality 在指定图片格式为 image/jpeg 或 image/webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。
     * @param { Function } callback 回调函数
     */
    canvasToDataURL: function (canvas, format = "jpeg", quality = 1, callback) {
        var flag = callback && typeof callback === "function";
        format = "image/" + format;
        var dataurl = canvas.toDataURL(format, quality);
        if (!flag) return dataurl;
        callback(dataurl);
    },
    /**
     * @description dataUrl 转 canvas
     * @param { String } dataUrl
     * @param { Function } callback 回调函数
     */
    dataURLToCanvas: function (dataUrl, callback) {
        var flag = callback && typeof callback === "function";
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var img = new Image();
        img.src = dataUrl;
        img.onload = function () {
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);
            if (!flag) return canvas;
            callback(canvas);
        };
    },
    /**
     * @description canvas 转 image
     * @param { Object } canvas 对象
     * @param { Object } format 文件格式（默认为 jpeg）
     * @param { Object } quality 在指定图片格式为 jpeg 或 webp 的情况下，可以从 0 到 1 的区间内选择图片的质量。
     * @return { Object } image 对象
     * @param { Function } callback 回调函数
     */
    canvasToImage: function (canvas, format = "jpeg", quality, callback) {
        var flag = callback && typeof callback === "function";
        format = "image/" + format;
        var img = new Image();
        // 如果 quality 图片质量参数存在的话图片格式只能是 .jpeg 或 .webp
        if (quality) {
            img.src = canvas.toDataURL(format, quality);
        } else {
            img.src = canvas.toDataURL(format);
        }
        if (!flag) return img;
        callback(img);
    },
    /**
     * @description file对象或blob对象 转 dataUrl
     * @param { Object } obj file对象或blob对象
     * @param { Function } callback 回调函数
     */
    blobOrFileToDataURL: function (obj, callback) {
        var flag = callback && typeof callback === "function";
        var reader = new FileReader();
        reader.readAsDataURL(obj);
        reader.onload = function (e) {
            if (!flag) return e.target.result;
            callback(e.target.result);
        };
    },
    /**
     * @description dataUrl 转 blob对象或file对象
     * @param { String } dataUrl
     * @param { Number } type 1 file对象，2 blob对象
     * @param { String } filename 文件名称
     * @param { Function } callback 回调函数
     */
    dataURLToBlobOrFile: function (dataurl, type = 1, filename = "picture.jpeg", callback) {
        var flag = callback && typeof callback === "function";
        var arr = dataurl.split(',');
        var mime = arr[0].match(/:(.*?);/)[1];
        var bstr = atob(arr[1]);
        var len = bstr.length;
        // 创建视图
        var u8arr = new Uint8Array(len);
        while (len--) {
            u8arr[len] = bstr.charCodeAt(len);
        }
        if (type === 1) { // 转换成file对象
            var result = new File([u8arr], filename, { type: mime });
            if (!flag) return result;
            callback(result);
        } else { // 转换成成blob对象
            var result = new Blob([u8arr], { type: mime });
            if (!flag) return result;
            callback(result);
        }
    },
    /**
     * @description blob对象或file对象 转 image对象
     * @param { Object } obj blob对象或file对象
     * @param { Function } callback 回调函数
     */
    blobOrFileToImage: function (obj, callback) {
        var flag = callback && typeof callback === "function";
        this.blobOrFileToDataURL(obj, function (dataurl) {
            var img = new Image();
            img.src = dataurl;
            if (!flag) return img;
            callback(img);
        });
    },
    /**
     * @description image对象 转 blob对象或file对象
     * @param { Object } imageObj image对象
     * @param { Number } type 1 file对象，2 blob对象
     * @param { String } filename 文件名称 xxx.jpeg
     * @param { Function } callback 回调函数
     */
    imageToBlobOrFile: function (imageObj, type = 1, filename = "picture.jpeg", callback) {
        var flag = callback && typeof callback === "function";
        this.imageToCanvas(imageObj, function (canvas) {
            this.canvasToDataURL(canvas, null, null, function (dataurl) {
                this.dataURLToBlobOrFile(dataurl, type, filename, function (file) {
                    if (!flag) return file;
                    callback(file);
                });
            }.bind(this));
        }.bind(this));
    },
    /**
     * @description blob对象或file对象 转 image对象
     * @param { Object } obj blob对象或file对象
     * @param { Function } callback 回调函数
     */
    blobOrFileToCanvas: function (obj, callback) {
        var flag = callback && typeof callback === "function";
        this.blobOrFileToDataURL(obj, function (dataurl) {
            this.dataURLToCanvas(dataurl, function (canvas) {
                if (!flag) return canvas;
                callback(canvas);
            });
        }.bind(this));
    },
    /**
     * @description canvas对象 转 blob对象或file对象
     * @param { Object } canvas canvas对象
     * @param { Number } type 1 file对象，2 blob对象
     * @param { String } filename 文件名称 xxx.jpeg
     * @param { Function } callback 回调函数
     */
    canvasToBlobOrFile: function (canvas, type = 1, filename = "picture.jpeg", callback) {
        var flag = callback && typeof callback === "function";
        this.canvasToDataURL(canvas, null, null, function (dataurl) {
            this.dataURLToBlobOrFile(dataurl, type, filename, function (file) {
                if (!flag) return file;
                callback(file);
            });
        });
    },
    /**
     * @description image对象 转 dataURL
     * @param { Object } imageObj
     * @param { Function } callback 回调函数
     */
    imageToDataURL: function (imageObj, callback) {
        var flag = callback && typeof callback === "function";
        this.imageToCanvas(imageObj, function (canvas) {
            this.canvasToDataURL(canvas, null, null, function (dataurl) {
                if (!flag) return dataurl;
                callback(dataurl);
            });
        }.bind(this));
    },
    /**
     * @description image对象 转 canvas
     * @param { String } src
     * @param { Function } callback 回调函数
     */
    imageToCanvas: function (imageObj, callback) {
        var flag = callback && typeof callback === "function";
        var src = imageObj.src;
        if (src && src.indexOf("base64") > -1) {
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            var img = new Image();
            img.src = src;
            img.onload = function () {
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.drawImage(img, 0, 0);
                if (!flag) return null;
                callback(canvas);
            };
        } else {
            if (!flag) return null;
            callback(null);
        }
    },
    /**
     * @description dataURL 转 image对象
     * @param { String } dataurl
     * @param { Function } callback 回调函数
     */
    dataURLToImage: function (dataurl, callback) {
        var flag = callback && typeof callback === "function";
        var img = new Image();
        img.src = dataurl;
        if (!flag) return null;
        callback(img);
    },
    /**
    * @description 文件下载
    * @param { String } href 文件地址
    * @param { String } title 文件名
    */
    fileDownload: function (href, title) {
        var aLink = document.createElement("a");
        aLink.setAttribute("href", href);
        aLink.setAttribute("download", title);
        var event;
        if (window.MouseEvent) {
            event = new MouseEvent('click');
        } else {
            event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        }
        aLink.dispatchEvent(event);
    },
    /**
    * @description file对象转blob对象
    * @param { Object } file 文件
    * @param { Function } callback 回调函数
    */
    fileToBlob: function (file, callback) {
        var flag = callback && typeof callback === "function";
        var reader = new FileReader();
        var reader = reader.readAsArrayBuffer(file);
        var blob = null;
        reader.onload = (e) => {
            if (typeof e.target.result === 'object') {
                blob = new Blob([e.target.result]);
            } else {
                blob = e.target.result;
            }
        }
        if (!flag) return null;
        callback(blob);
    },
    /**
    * @description blob对象转file对象
    * @param { Object } blob 文件
    * @param { String } filename 文件名称 xxx.png
    * @param { Function } callback 回调函数
    */
    blobToFile: function (blob, filename = "picture.png", callback) {
        var flag = callback && typeof callback === "function";
        var blob = new File([blob], filename, { type: "", lastModified: Date.now() });
        if (!flag) return blob;
        callback(blob);
    },
    /**
    * @description 图片格式转换
    * @param { Object } obj blob对象转file对象
    * @param { String } format 文件格式（默认为png）
    * @param { Function } callback 回调函数
    */
    fileFormatToImage: function (obj, format = "png", callback) {
        var flag = callback && typeof callback === "function";
        this.blobOrFileToCanvas(obj, function (canvas) {
            this.canvasToImage(canvas, format, null, function (img) {
                if (!flag) return img;
                callback(img)
            });
        }.bind(this));
    },
    /**
    * @description 图片格式转换
    * @param { Object } obj blob对象转file对象
    * @param { Number } type 1 file对象，2 blob对象
    * @param { String } format 文件格式（默认为png）
    * @param { Function } callback 回调函数
    */
    fileFormatToBlobOrFile: function (obj, format = "png", type, fileName, callback) {
        var flag = callback && typeof callback === "function";
        this.blobOrFileToCanvas(obj, function (canvas) {
            this.canvasToImage(canvas, format, null, function (img) {
                var name = fileName + "." + format;
                var src = img.src;
                this.dataURLToBlobOrFile(src, type, name, function (file) {
                    if (!flag) return file;
                    callback(file);
                });
            }.bind(this));
        }.bind(this));
    },
    /**
    * @description 计算图片大小
    * @param { String } base64 dataURL
    * @param { Number } type 1 KB，2 MB
    * @param { Function } callback 回调函数
    */
    calcSize: function (base64, type = 1, callback) {
        var flag = callback && typeof callback === "function";
        var base64Str = base64.replace("data:image/jpeg;base64,", "");
        var base64Length = base64Str.length;
        var bufferLength = parseInt(base64Length - (base64Length / 8) * 2);
        var size = 0;
        size = (bufferLength / Math.pow(1024, +type)).toFixed(3);
        if (!flag) return parseFloat(size);
        callback(parseFloat(size));
    }
}