import { round } from 'ut2';
import divide from './divide';
import gcd from './gcd';
import loadImageWithBlob from './loadImageWithBlob';
import bytesToSize from './bytesToSize';
/**
* 计算宽高比
*
* @private
* @param {number} w 宽度
* @param {number} h 高度
* @returns {string} 宽高比
*/
function calcContrast(w, h) {
const n = gcd(w, h);
return `${divide(round(w), n)}:${divide(round(h), n)}`;
}
/**
* @typedef {Object} ImageInfo 图片信息
* @property {number} width 宽度
* @property {number} height 高度
* @property {string} contrast 宽高比
* @property {string} measure 尺寸
* @property {string} size 大小
* @property {number} bytes 大小,单位字节
* @property {HTMLImageElement} image HTML图片元素
* @property {Blob} blob 图片 Blob 对象
*/
/**
* 获取图片信息。
*
* <em style="font-weight: bold;">注意:该方法仅适用于浏览器端。</em>
*
* @alias module:Browser.getImageInfo
* @since 4.20.0
* @param {string | Blob} img 图片地址或 blob 对象。
* @param {AjaxOptions} [ajaxOptions] ajax 请求配置项,当传入的图片为字符串时才会触发请求。
* @returns {Promise<ImageInfo>} 图片信息。
* @example
*
* getImageInfo(file).then(imageInfo=>{
* console.log(imageInfo);
* // {
* // width: 100,
* // height: 100,
* // contrast: '1:1',
* // measure: '100 × 100 px',
* // size: '11 B',
* // bytes: 11,
* // image: HTMLImageElement {},
* // blob: Blob {}
* // }
* });
*
* getImageInfo('https://dummyimage.com/200x300').then(imageInfo=>{
* // do something
* });
*
* getImageInfo('data:image/png;base64,PGEgaWQ9ImEiPjxiIGlkPSJiIj5oZXkhPC9iPjwvYT4=').then(imageInfo=>{
* // do something
* });
*
*/
function getImageInfo(img, ajaxOptions) {
return loadImageWithBlob(img, ajaxOptions).then(({ image, blob }) => {
const { width, height } = image;
return {
width,
height,
contrast: calcContrast(width, height),
measure: `${width} × ${height} px`,
size: bytesToSize(blob.size),
bytes: blob.size,
image,
blob
};
});
}
export default getImageInfo;