# 图片

cloudImageURL

使用数据万象对图片进行处理，文档

imageView2/<mode>
   /w/<Width>
   /h/<Height>
   /format/<Format>
   /q/<Quality>
   /rq/<Quality>
   /lq/<Quality>

关于 webp 的相关说明，本库会自动检查兼容性，但是检查过程是一个异步操作，而本函数不适合写为一个异步函数，故过早使用该函数，可能会导致 webp 优化不可用

由于不利于 tree-shacking 已停止自动检查 webp 兼容性，如需该检查，请提前主动调用 webpCheck，本函数会缓存结果供后续 cloudImageURL 使用

另外，需要特别说明的是，<picture> 已在 iOS 9.3+ 得到支持，可以考虑以下替代方案来确保图片格式的可用性：

<picture>
  <source srcSet="logo.webp" type="image/webp" />
  <img src="logo.png" alt="logo" />
</picture>

定义：

export interface CloudImageURLOptions {
  buckey: CloudImageBuckey;
  url: URLLike; // 需要处理的 url
  rule?: string; // 图片处理规则，不包括 format （没有显式包含 q 规则，则图片质量统一设置为 70%）
  formatJPG?: boolean; // 是否按需将 png, webp 格式转换为 jpg，默认为 true

  formatWebp?: boolean; // 启用 webp 优化，默认为 false
  webpCheck?: string; // 从 window[webpCheck] 检查 webp 支持情况，一般仅用于测试
}

export declare type CloudImageBuckey = {
    [k: string]: string;
};
export declare const cloudImageURL: ({ buckey, url, rule, formatJPG, formatWebp: preWebp, webpCheck, }: CloudImageURLOptions) => string;

checkImageSize

图片尺寸检查

定义：

/**
 * 图片尺寸检查
 * @param {(Object|String)} image - 图片信息，支持 File 对象 或 Data URLs
 * @param {Object} [options={}] - 检查参数
 * @param {Number} [options.width] - 检查宽度
 * @param {Number} [options.height] - 检查高度
 * @param {Number} [deviation=0] - 允许的偏差量
 * @returns {Object} - Promise 对象
 */
export declare const checkImageSize: (image: ImageObject, options: CheckImageSizeOptions, deviation?: number) => Promise<boolean>;

imageOptimization(image[, quality = 0.9][, options])

图片优化，暂不支持 gif 图片

参数：

{(Object|String)} image - 图片信息，支持 File 对象或 Data URLs
{Number} [quality=0.9] - 输出图片质量，0 - 1 之间，仅 image/jpeg 与 image/webp 有效
{Object} [options={}] - 输出图片相关选项
{Number} [options.maxWidth=1920] - 输出图片的最大宽度，若图片原始宽度小于该宽度，则返回原始尺寸图片，若图片原始宽度大于该宽度，则返回等比缩放为该尺寸的图片
{String} [options.mimeType] - 输出图片格式，MIME 类型

返回值：

{Object} - Promise 对象，resolve() 参数为优化后的图片 Blob 对象，如果输出图片格式为 image/gif，则原样返回 image 参数内容，暂不处理

用法：

<body>
    <input id="file" type="file" accept="image/*">
    <script>
    import { imageOptimization } from '@tencent/slug-function'

    document.querySelector('#file').addEventListener('change', function () {
        imageOptimization(this.files[0], 0.1, {
            mimeType: 'image/webp',
            maxWidth: 1080
        }).then(blob => {
            console.log(blob)
        })
    })
    </script>
</body>

← 格式化判断 →