loadImageWithBlob.js

import getFileBlob from './getFileBlob';
import loadImage from './loadImage';
/**
 * @typedef {Object} ImageWithBlob HTML图片元素和 blob 对象
 * @property {HTMLImageElement} image HTML图片元素
 * @property {Blob} blob blob 对象
 */
/**
 * 加载图片,返回图片元素和 blob 对象。
 *
 * 如果传入图片地址,将通过 ajax 请求转为 blob 格式。
 *
 * <em style="font-weight: bold;">注意:该方法仅适用于浏览器端。</em>
 *
 * @method
 * @alias module:Browser.loadImageWithBlob
 * @since 4.20.0
 * @param {string | Blob} img 图片地址或 blob 对象
 * @param {AjaxOptions} [ajaxOptions] ajax 请求配置项,当传入的图片为字符串时才会触发请求。
 * @returns {Promise<ImageWithBlob>} HTML图片元素和 blob 对象
 * @example
 *
 * loadImage(file).then(({image, blob})=>{
 *   console.log(image, blob);
 *   // HTMLImageElement {} Blob {}
 * });
 *
 * loadImage('https://dummyimage.com/200x300').then(({image, blob})=>{
 *   // do something
 * });
 *
 * loadImage('data:image/png;base64,PGEgaWQ9ImEiPjxiIGlkPSJiIj5oZXkhPC9iPjwvYT4=').then(({image, blob})=>{
 *   // do something
 * });
 *
 */
function loadImageWithBlob(img, ajaxOptions) {
    return getFileBlob(img, ajaxOptions).then((blob) => {
        return loadImage(blob).then((image) => {
            return { blob, image };
        });
    });
}
export default loadImageWithBlob;