util-helpers/types/compressImage.d.ts

一个基于业务场景的工具方法库

import loadImageWithBlob from './loadImageWithBlob';
type Info = {
    image: HTMLImageElement;
    blob: Blob;
    canvas: HTMLCanvasElement;
    context: CanvasRenderingContext2D;
};
type Options = {
    width?: number;
    height?: number;
    rotate?: number;
    offset?: [number, number] | ((info: Info, options: Options) => [number, number]);
    background?: string;
    canvasWidth?: number | ((info: Info, options: Options) => number);
    canvasHeight?: number | ((info: Info, options: Options) => number);
    format?: 'blob' | 'dataURL';
    type?: string;
    quality?: number;
    beforeCompress?: (imageWithBlob: Pick<Info, 'image' | 'blob'>, options: Options) => void;
    beforeDraw?: (info: Info, options: Options) => void;
    afterDraw?: (info: Info, options: Options) => void;
    ajaxOptions?: Parameters<typeof loadImageWithBlob>[1];
};
interface CompressImage {
    (img: string | Blob, options: Omit<Options, 'format'> & {
        format: 'dataURL';
    }): Promise<string>;
    (img: string | Blob, options?: Options): Promise<Blob>;
}
/**
 * 压缩图片。
 *
 * <em style="font-weight: bold;">注意：该方法仅适用于浏览器端。</em>
 *
 * <em style="font-weight: bold;">如果是半透明图片并且导出 `image/png` 格式，建议将背景变成透明 `background=transparent`，避免出现白边。注意正常图片压缩导出 `image/png` 格式后文件可能会比原图大。</em>
 *
 * @function
 * @alias module:Browser.compressImage
 * @since 4.20.0
 * @see {@link https://sytpwg.csb.app/ 在线示例}
 * @param {string | Blob} img 图片地址或 blob 对象
 * @param {Object} [options] 配置项
 * @param {number} [options.width] 自定义图片宽度，默认图片自身宽度
 * @param {number} [options.height] 自定义图片高度，默认图片自身高度
 * @param {number} [options.rotate] 旋转
 * @param {Array | function} [options.offset=[0, 0]] x,y轴偏移值，默认`[0, 0]`
 * @param {string} [options.background=#fff] 背景颜色，默认`#fff`
 * @param {number | function} [options.canvasWidth] 画布宽度，默认图片宽度
 * @param {number | function} [options.canvasHeight] 画布高度，默认图片高度
 * @param {'blob' | 'dataURL'} [options.format='blob'] 导出格式，默认`blob`
 * @param {string} [options.type='image/jpeg'] 图片类型，默认`image/jpeg`
 * @param {number} [options.quality=0.8] 图片质量，默认`0.8`
 * @param {function} [options.beforeCompress] 图片加载完成，画布创建之前调用
 * @param {function} [options.beforeDraw] 图片载入画布之前调用
 * @param {function} [options.afterDraw] 图片载入画布之后调用
 * @param {AjaxOptions} [options.ajaxOptions] ajax 请求配置项，当传入图片地址时才会触发ajax请求。
 * @returns {Promise<Blob | string>} blob 对象 或 data url 图片
 * @example
 *
 * // 默认返回压缩后的 blob 对象
 * compressImage(file).then(blob=>{
 *    // do something
 *    // 转为文件对象 new File([blob], file.name, { type: file.type })
 * });
 *
 * // 设置返回格式 data url
 * compressImage(file, { format: 'dataURL' }).then(url=>{
 *    // do something
 * });
 *
 * // 自定义配置
 * compressImage('https://dummyimage.com/200x300', {
 *  width: 100,
 *  height: 100,
 *  quality: 0.5,
 *  beforeCompress({ image, blob }){},
 *  beforeDraw({ image, blob, canvas, context }){}
 *  afterDraw({ image, blob, canvas, context }){}
 * }).then(blob=>{
 *   // do something
 * });
 *
 * // 支持不同形式的图片文件
 * compressImage('data:image/png;base64,PGEgaWQ9ImEiPjxiIGlkPSJiIj5oZXkhPC9iPjwvYT4=').then(blob=>{
 *   // do something
 * });
 *
 */
declare const compressImage: CompressImage;
export default compressImage;