@gdjiami/jslib/compress.js

Jiami FrontEnd helpers and Services

import * as tslib_1 from "tslib";
import { setupLocalPreviewUrl } from './string';
function canvasDataURL(url, obj) {
    return tslib_1.__awaiter(this, void 0, void 0, function () {
        return tslib_1.__generator(this, function (_a) {
            return [2 /*return*/, new Promise(function (resolve, reject) {
                    var img = new Image();
                    img.src = url;
                    img.onload = function () {
                        // 默认按比例压缩
                        var w = img.width > 4000 ? 4000 : img.width;
                        var h = img.height > 4000 ? 4000 : img.height;
                        var scale = w / h;
                        w = obj.width || w;
                        h = obj.height || w / scale;
                        // 生成canvas
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        // 创建属性节点
                        var anw = document.createAttribute('width');
                        anw.nodeValue = w.toString();
                        var anh = document.createAttribute('height');
                        anh.nodeValue = h.toString();
                        canvas.setAttributeNode(anw);
                        canvas.setAttributeNode(anh);
                        ctx.drawImage(img, 0, 0, w, h);
                        // quality值越小，所绘制出的图像越模糊
                        canvas.toBlob(function (blob) {
                            if (blob) {
                                resolve(blob);
                            }
                        }, 'image/jpeg', obj.quality);
                    };
                    img.onerror = reject;
                })];
        });
    });
}
/**
 * 对图片进行压缩处理，通过压缩比率控制输出文件的大小
 *
 * @param file 图片文件
 * @param quality 压缩比率
 *
 */
export function compressImage(file, quality) {
    return tslib_1.__awaiter(this, void 0, void 0, function () {
        var _this = this;
        return tslib_1.__generator(this, function (_a) {
            return [2 /*return*/, new Promise(function (resolve) { return tslib_1.__awaiter(_this, void 0, void 0, function () {
                    var bl;
                    return tslib_1.__generator(this, function (_a) {
                        switch (_a.label) {
                            case 0: return [4 /*yield*/, canvasDataURL(setupLocalPreviewUrl(file), { quality: quality })];
                            case 1:
                                bl = _a.sent();
                                resolve(new File([bl], file.name, { type: file.type }));
                                return [2 /*return*/];
                        }
                    });
                }); })];
        });
    });
}
/**
 * 对图片进行压缩处理，通过传入的 maxSize， 控制输出文件的大小，压缩到小于 maxSize，或者到达最小压缩比的文件
 *
 * @param file 图片文件
 * @param maxSize 压缩最大值，单位字节
 *
 */
export function compressImageBySize(file, maxSize) {
    return tslib_1.__awaiter(this, void 0, void 0, function () {
        return tslib_1.__generator(this, function (_a) {
            return [2 /*return*/, compressImage(file, Math.min(maxSize / file.size, 1))];
        });
    });
}