@studio-kit/utils-browser 1.0.1 → 1.0.3

package/src/Img.js

@@ -0,0 +1,482 @@
+export default class Img {
+    /**
+     * 从 url / File / Blob / base64 获取图片宽高
+     * @param {{ url?: string, file?: File, blob?: Blob, base64?: string }} options
+     * @returns {Promise<{ width: number, height: number }>}
+     */
+    static async getSize({ url, file, blob, base64 } = {}) {
+        if (url != null && url !== '') {
+            return this.getSizeFromUrl(url)
+        }
+        if (file != null) {
+            return this.getSizeFromFile(file)
+        }
+        if (blob != null) {
+            return this.getSizeFromBlob(blob)
+        }
+        if (base64 != null && base64 !== '') {
+            return this.getSizeFromBase64(base64)
+        }
+        throw new Error('Img.getSize: 请传入 url / file / blob / base64 之一')
+    }
+
+    /**
+     * 将图片转为 base64，支持缩放与体积压缩
+     * @param {{
+     *   url?: string,
+     *   file?: File,
+     *   blob?: Blob,
+     *   base64?: string,
+     *   credentials?: RequestCredentials,
+     *   maxWidth?: number,
+     *   maxHeight?: number,
+     *   scale?: number,
+     *   quality?: number,
+     *   mimeType?: string,
+     *   maxBytes?: number,
+     * }} options
+     * @returns {Promise<{
+     *   base64: string,
+     *   dataUrl: string,
+     *   mimeType: string,
+     *   width: number,
+     *   height: number,
+     *   byteLength: number,
+     * }>}
+     */
+    static async toBase64({
+        url,
+        file,
+        blob,
+        base64,
+        credentials = 'include',
+        maxWidth,
+        maxHeight,
+        scale,
+        quality = 0.92,
+        mimeType,
+        maxBytes,
+    } = {}) {
+        const source = await this.#resolveToBlob({
+            url,
+            file,
+            blob,
+            base64,
+            credentials,
+        })
+        const { image, objectUrl } = await this.#loadHtmlImageFromBlob(source.blob)
+        try {
+            const {
+                width: targetWidth,
+                height: targetHeight,
+            } = this.#calcTargetSize({
+                width: image.naturalWidth,
+                height: image.naturalHeight,
+                maxWidth,
+                maxHeight,
+                scale,
+            })
+            const outputMime = this.#normalizeOutputMime(
+                mimeType || source.mimeType || 'image/jpeg',
+                { preferLossy: maxBytes != null || quality < 1 },
+            )
+            let result = await this.#encodeCanvas({
+                image,
+                width: targetWidth,
+                height: targetHeight,
+                mimeType: outputMime,
+                quality,
+            })
+
+            if (maxBytes != null && maxBytes > 0 && result.byteLength > maxBytes) {
+                result = await this.#compressToMaxBytes({
+                    image,
+                    width: targetWidth,
+                    height: targetHeight,
+                    mimeType: outputMime,
+                    quality,
+                    maxBytes,
+                })
+            }
+
+            return {
+                base64: result.base64,
+                dataUrl: result.dataUrl,
+                mimeType: result.mimeType,
+                width: result.width,
+                height: result.height,
+                byteLength: result.byteLength,
+            }
+        } finally {
+            URL.revokeObjectURL(objectUrl)
+        }
+    }
+
+    /**
+     * @param {string} url
+     * @returns {Promise<{ width: number, height: number }>}
+     */
+    static getSizeFromUrl(url) {
+        return this.#measureFromSrc(url)
+    }
+
+    /**
+     * @param {File} file
+     * @returns {Promise<{ width: number, height: number }>}
+     */
+    static getSizeFromFile(file) {
+        return this.getSizeFromBlob(file)
+    }
+
+    /**
+     * @param {Blob} blob
+     * @returns {Promise<{ width: number, height: number }>}
+     */
+    static async getSizeFromBlob(blob) {
+        const objectUrl = URL.createObjectURL(blob)
+        try {
+            return await this.#measureFromSrc(objectUrl)
+        } finally {
+            URL.revokeObjectURL(objectUrl)
+        }
+    }
+
+    /**
+     * @param {string} base64 - data URL（data:image/...;base64,...）或纯 base64 字符串
+     * @returns {Promise<{ width: number, height: number }>}
+     */
+    static async getSizeFromBase64(base64) {
+        const value = String(base64).trim()
+        if (/^data:/i.test(value)) {
+            return this.#measureFromSrc(value)
+        }
+        const binary = atob(value.replace(/\s/g, ''))
+        const bytes = new Uint8Array(binary.length)
+        for (let i = 0; i < binary.length; i++) {
+            bytes[i] = binary.charCodeAt(i)
+        }
+        const mime = this.#detectMime(bytes) || 'image/png'
+        return this.getSizeFromBlob(new Blob([bytes], { type: mime }))
+    }
+
+    /**
+     * @param {{
+     *   url?: string,
+     *   file?: File,
+     *   blob?: Blob,
+     *   base64?: string,
+     *   credentials?: RequestCredentials,
+     * }} options
+     * @returns {Promise<{ blob: Blob, mimeType: string }>}
+     */
+    static async #resolveToBlob({ url, file, blob, base64, credentials } = {}) {
+        if (url != null && url !== '') {
+            const response = await fetch(url, { credentials })
+            if (!response.ok) {
+                throw new Error(`Img.toBase64: 下载图片失败 (${response.status})`)
+            }
+            const remoteBlob = await response.blob()
+            return {
+                blob: remoteBlob,
+                mimeType: remoteBlob.type || 'image/png',
+            }
+        }
+        if (file != null) {
+            return {
+                blob: file,
+                mimeType: file.type || 'image/png',
+            }
+        }
+        if (blob != null) {
+            return {
+                blob,
+                mimeType: blob.type || 'image/png',
+            }
+        }
+        if (base64 != null && base64 !== '') {
+            const parsed = this.#base64ToBlob(base64)
+            return {
+                blob: parsed.blob,
+                mimeType: parsed.mimeType,
+            }
+        }
+        throw new Error('Img.toBase64: 请传入 url / file / blob / base64 之一')
+    }
+
+    /**
+     * @param {string} base64
+     * @returns {{ blob: Blob, mimeType: string }}
+     */
+    static #base64ToBlob(base64) {
+        const value = String(base64).trim()
+        let mimeType = 'image/png'
+        let pure = value
+        const dataUrlMatch = /^data:([^;,]+)?(;base64)?,(.*)$/i.exec(value)
+        if (dataUrlMatch) {
+            mimeType = dataUrlMatch[1] || mimeType
+            pure = dataUrlMatch[3] || ''
+        }
+        const binary = atob(pure.replace(/\s/g, ''))
+        const bytes = new Uint8Array(binary.length)
+        for (let i = 0; i < binary.length; i++) {
+            bytes[i] = binary.charCodeAt(i)
+        }
+        if (!dataUrlMatch) {
+            mimeType = this.#detectMime(bytes) || mimeType
+        }
+        return {
+            blob: new Blob([bytes], { type: mimeType }),
+            mimeType,
+        }
+    }
+
+    /**
+     * @param {Blob} blob
+     * @returns {Promise<{ image: HTMLImageElement, objectUrl: string }>}
+     */
+    static #loadHtmlImageFromBlob(blob) {
+        const objectUrl = URL.createObjectURL(blob)
+        return new Promise((resolve, reject) => {
+            const image = new Image()
+            image.onload = () => {
+                resolve({ image, objectUrl })
+            }
+            image.onerror = () => {
+                URL.revokeObjectURL(objectUrl)
+                reject(new Error('Img.toBase64: 无法解码图片'))
+            }
+            image.src = objectUrl
+        })
+    }
+
+    /**
+     * @param {{
+     *   width: number,
+     *   height: number,
+     *   maxWidth?: number,
+     *   maxHeight?: number,
+     *   scale?: number,
+     * }} options
+     * @returns {{ width: number, height: number }}
+     */
+    static #calcTargetSize({ width, height, maxWidth, maxHeight, scale } = {}) {
+        let w = Math.max(1, Number(width) || 1)
+        let h = Math.max(1, Number(height) || 1)
+
+        if (scale != null && Number(scale) > 0 && Number(scale) !== 1) {
+            w = Math.max(1, Math.round(w * Number(scale)))
+            h = Math.max(1, Math.round(h * Number(scale)))
+        }
+
+        let ratio = 1
+        if (maxWidth != null && maxWidth > 0 && w > maxWidth) {
+            ratio = Math.min(ratio, maxWidth / w)
+        }
+        if (maxHeight != null && maxHeight > 0 && h > maxHeight) {
+            ratio = Math.min(ratio, maxHeight / h)
+        }
+        if (ratio < 1) {
+            w = Math.max(1, Math.round(w * ratio))
+            h = Math.max(1, Math.round(h * ratio))
+        }
+        return { width: w, height: h }
+    }
+
+    /**
+     * @param {string} mimeType
+     * @param {{ preferLossy?: boolean }} options
+     * @returns {string}
+     */
+    static #normalizeOutputMime(mimeType, { preferLossy = false } = {}) {
+        const mime = String(mimeType || '').toLowerCase()
+        if (mime === 'image/jpeg' || mime === 'image/jpg' || mime === 'image/webp') {
+            return mime === 'image/jpg' ? 'image/jpeg' : mime
+        }
+        if (mime === 'image/png' || mime === 'image/gif' || mime === 'image/bmp') {
+            // 需要体积压缩时，PNG/GIF 改用 jpeg，便于 quality 生效
+            return preferLossy ? 'image/jpeg' : mime === 'image/bmp' ? 'image/png' : mime
+        }
+        return preferLossy ? 'image/jpeg' : 'image/png'
+    }
+
+    /**
+     * @param {{
+     *   image: HTMLImageElement,
+     *   width: number,
+     *   height: number,
+     *   mimeType: string,
+     *   quality: number,
+     * }} options
+     * @returns {Promise<{
+     *   base64: string,
+     *   dataUrl: string,
+     *   mimeType: string,
+     *   width: number,
+     *   height: number,
+     *   byteLength: number,
+     * }>}
+     */
+    static async #encodeCanvas({ image, width, height, mimeType, quality }) {
+        const canvas = document.createElement('canvas')
+        canvas.width = width
+        canvas.height = height
+        const ctx = canvas.getContext('2d')
+        if (!ctx) {
+            throw new Error('Img.toBase64: 无法创建 canvas 上下文')
+        }
+        if (mimeType === 'image/jpeg') {
+            ctx.fillStyle = '#ffffff'
+            ctx.fillRect(0, 0, width, height)
+        }
+        ctx.drawImage(image, 0, 0, width, height)
+
+        const supportsQuality = mimeType === 'image/jpeg' || mimeType === 'image/webp'
+        const dataUrl = supportsQuality
+            ? canvas.toDataURL(mimeType, this.#clampQuality(quality))
+            : canvas.toDataURL(mimeType)
+        const base64 = dataUrl.includes(',') ? dataUrl.split(',')[1] : dataUrl
+        const byteLength = Math.floor((base64.length * 3) / 4)
+            - (base64.endsWith('==') ? 2 : base64.endsWith('=') ? 1 : 0)
+
+        return {
+            base64,
+            dataUrl,
+            mimeType,
+            width,
+            height,
+            byteLength,
+        }
+    }
+
+    /**
+     * 先降 quality，仍超体积再等比缩小尺寸，直到不超过 maxBytes
+     * @param {{
+     *   image: HTMLImageElement,
+     *   width: number,
+     *   height: number,
+     *   mimeType: string,
+     *   quality: number,
+     *   maxBytes: number,
+     * }} options
+     */
+    static async #compressToMaxBytes({
+        image,
+        width,
+        height,
+        mimeType,
+        quality,
+        maxBytes,
+    }) {
+        let outputMime = this.#normalizeOutputMime(mimeType, { preferLossy: true })
+        let currentQuality = this.#clampQuality(quality)
+        let currentWidth = width
+        let currentHeight = height
+        let result = await this.#encodeCanvas({
+            image,
+            width: currentWidth,
+            height: currentHeight,
+            mimeType: outputMime,
+            quality: currentQuality,
+        })
+
+        // 1) 逐步降低质量
+        while (result.byteLength > maxBytes && currentQuality > 0.4) {
+            currentQuality = Math.max(0.4, Number((currentQuality - 0.1).toFixed(2)))
+            result = await this.#encodeCanvas({
+                image,
+                width: currentWidth,
+                height: currentHeight,
+                mimeType: outputMime,
+                quality: currentQuality,
+            })
+        }
+
+        // 2) 仍超限则等比缩小
+        let guard = 0
+        while (result.byteLength > maxBytes && (currentWidth > 32 || currentHeight > 32) && guard < 12) {
+            guard += 1
+            currentWidth = Math.max(32, Math.round(currentWidth * 0.85))
+            currentHeight = Math.max(32, Math.round(currentHeight * 0.85))
+            result = await this.#encodeCanvas({
+                image,
+                width: currentWidth,
+                height: currentHeight,
+                mimeType: outputMime,
+                quality: currentQuality,
+            })
+        }
+
+        if (result.byteLength > maxBytes) {
+            throw new Error(
+                `Img.toBase64: 无法压缩到目标大小（当前 ${result.byteLength}B，目标 ${maxBytes}B）`,
+            )
+        }
+        return result
+    }
+
+    /**
+     * @param {number} quality
+     * @returns {number}
+     */
+    static #clampQuality(quality) {
+        const value = Number(quality)
+        if (!Number.isFinite(value)) {
+            return 0.92
+        }
+        return Math.min(1, Math.max(0.1, value))
+    }
+
+    /**
+     * @param {Uint8Array} bytes
+     * @returns {string | null}
+     */
+    static #detectMime(bytes) {
+        if (bytes.length >= 3 && bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff) {
+            return 'image/jpeg'
+        }
+        if (
+            bytes.length >= 8 &&
+            bytes[0] === 0x89 && bytes[1] === 0x50 && bytes[2] === 0x4e && bytes[3] === 0x47
+        ) {
+            return 'image/png'
+        }
+        if (
+            bytes.length >= 6 &&
+            bytes[0] === 0x47 && bytes[1] === 0x49 && bytes[2] === 0x46 &&
+            bytes[3] === 0x38 && (bytes[4] === 0x39 || bytes[4] === 0x37) && bytes[5] === 0x61
+        ) {
+            return 'image/gif'
+        }
+        if (
+            bytes.length >= 12 &&
+            bytes[0] === 0x52 && bytes[1] === 0x49 && bytes[2] === 0x46 && bytes[3] === 0x46 &&
+            bytes[8] === 0x57 && bytes[9] === 0x45 && bytes[10] === 0x42 && bytes[11] === 0x50
+        ) {
+            return 'image/webp'
+        }
+        if (bytes.length >= 2 && bytes[0] === 0x42 && bytes[1] === 0x4d) {
+            return 'image/bmp'
+        }
+        return null
+    }
+
+    /**
+     * @param {string} src
+     * @returns {Promise<{ width: number, height: number }>}
+     */
+    static #measureFromSrc(src) {
+        return new Promise((resolve, reject) => {
+            const image = new Image()
+            image.onload = () => {
+                resolve({
+                    width: image.naturalWidth,
+                    height: image.naturalHeight,
+                })
+            }
+            image.onerror = () => {
+                reject(new Error(`Img: 无法加载图片 (${src.slice(0, 64)})`))
+            }
+            image.src = src
+        })
+    }
+}

package/src/Message.js

@@ -0,0 +1,7 @@
+export default class Message {
+    static emitParentIframe({ data, origin = '*' }) {
+        console.log('emitParentIframe', data)
+        if (window.parent) window.parent.postMessage(data, origin);
+        else console.error('对应父级iframe不存在')
+    }
+}

package/src/Perf.js

@@ -0,0 +1,3 @@
+import CommonPerf from '@studio-kit/utils-common/Perf.js'
+export default class Perf extends CommonPerf {
+}