Browser

Methods

(static) ajax(url, optionsopt) → {Promise.<object>}

Description:

• 请求

  注意：该方法仅适用于浏览器端。

Source:

• ajax.js, line 60

Since:

• 4.16.0

See:

• XMLHttpRequest

Example

ajax('/somefile').then(res=>{
  // do something
});

ajax('/api', { method: 'post' }).then(res=>{
  // do something
});

Parameters:

Returns:

Type

Promise.<object>

(static) checkFileType(file, acceptopt) → {boolean}

Description:

• 检查文件是否符合 accept 类型说明符。

  通过 file.type file.name file.url 与 accept 进行匹配。

Source:

• checkFileType.js, line 37

Since:

• 5.1.0

See:

• 唯一文件类型说明符
• Media Types

Example

const pdf = new File([], '1.pdf', { type: 'application/pdf' });
const jpeg = new File([], 'xx.jpeg', { type: 'image/jpeg' });

// 文件类型
checkFileType(pdf, 'application/pdf'); // true
checkFileType(jpeg, 'image/jpeg'); // true

// 通配符
checkFileType(jpeg, 'image/*'); // true
checkFileType(pdf, 'image/*'); // false
checkFileType(pdf, 'application/*'); // true
checkFileType(pdf, '*'); // true
checkFileType(jpeg, '*'); // true

// 文件名扩展名
checkFileType(jpeg, '.png,.jpeg,.jpg'); // true
checkFileType(pdf, '.pdf'); // true

Parameters:

Returns:

Type

boolean

(static) compressImage(img, optionsopt) → {Promise.<(Blob|string)>}

Description:

• 压缩图片。

  注意：该方法仅适用于浏览器端。

  如果是半透明图片并且导出 image/png 格式，建议将背景变成透明 background=transparent，避免出现白边。注意正常图片压缩导出 image/png 格式后文件可能会比原图大。

Source:

• compressImage.js, line 79

Since:

• 4.20.0

See:

• 在线示例

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
});

Parameters:

Returns:

Type

Promise.<(Blob|string)>

(static) dataURLToBlob(data) → {Blob}

Description:

• 将 DataURL 转为 Blob 对象

Source:

• dataURLToBlob.js, line 13

Since:

• 4.1.0

See:

• Base64

Example

const data = 'data:text/html;base64,PGEgaWQ9ImEiPjxiIGlkPSJiIj5oZXkhPC9iPjwvYT4=';
dataURLToBlob(dataurl); // Blob {size: 32, type: 'text/html'}

Parameters:

Returns:

Type

Blob

(async, static) download(data, optionsopt) → {Promise.<void>}

Description:

• 下载

  注意：该方法仅适用于浏览器端，兼容 IE10+ 和现代浏览器。

  注意：微信浏览器不支持H5下载文件。

  响应头中有 "Content-Disposition" 字段，客户端获取不到？ 请参考查阅 Access-Control-Expose-Headers 。

Source:

• download.js, line 66

Since:

• 4.16.0

See:

• Access-Control-Expose-Headers
• MIME
• 在线示例

Example

// 文本
download('hello world', 'text.txt');

// 远程文件1
// 不带协议的绝对地址，需要通过 dataType 指定为 url 类型
download('/xxx.jpg', { dataType: 'url', fileName: 'test.jpg' });

// 远程文件2
download('https://example.com/xxx.jpg');

// base64
download('data:image/png;base64,PGEgaWQ9ImEiPjxiIGlkPSJiIj5oZXkhPC9iPjwvYT4=', 'test.png');

// blob文件
download(new Blob(['hello world']), 'text.txt');

// 本地文件
download(File, 'filename.ext');

Parameters:

Returns:

Type

Promise.<void>

(static) fileReader(blob, typeopt) → {Promise.<(string|ArrayBuffer)>}

Description:

• 读取 Blob 或 File 对象，转为 Base64/String/ArrayBuffer

  注意：该方法仅适用于浏览器端。

Source:

• fileReader.js, line 33

Since:

• 4.16.0

See:

• FileReader

Example

const aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一个包含DOMString的数组
const htmlBlob = new Blob(aFileParts, { type: 'text/html' }); // 得到 blob

fileReader(htmlBlob).then(data=>{
  console.log(data); // data:text/html;base64,PGEgaWQ9ImEiPjxiIGlkPSJiIj5oZXkhPC9iPjwvYT4=
});

const textBlob = new Blob(aFileParts, { type: 'text/plain' });

fileReader(textBlob, 'text').then(data=>{
  console.log(data); // <a id="a"><b id="b">hey!</b></a>
});

Parameters:

Returns:

Type

Promise.<(string|ArrayBuffer)>

(static) getFileBlob(file, ajaxOptionsopt) → {Promise.<Blob>}

Description:

• 获取文件 Blob 。

Source:

• getFileBlob.js, line 22

Since:

• 4.21.0

Example

getFileBlob(file).then((blob)=>{
   // do something
});

getFileBlob('https://dummyimage.com/200x300').then((blob)=>{
  // do something
});

Parameters:

Returns:

Type

Promise.<Blob>

(static) getFileType(file) → {"image"|"audio"|"video"|"pdf"|"word"|"excel"|undefined}

获取文件类型。

Description:

• 内置文件类型和文件类型说明符

  类型	说明符
  image	image/*,.jpeg,.jpg,.gif,.bmp,.png,.webp,.svg,.apng,.avif,.ico,.tif,.tiff
  audio	audio/*,.mp3,.wav,.aac,.flac
  video	video/*,.mp4,.webm,.ogg,.mov
  pdf	application/pdf,.pdf
  word	application/vnd.openxmlformats-officedocument.wordprocessingml.document,.doc,.docx
  excel	application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,.xls,.xlsx

Source:

• getFileType.js, line 40

Since:

• 5.1.0

Example

const pdf = new File([], '1.pdf', { type: 'application/pdf' });
const jpeg = new File([], 'xx.jpeg', { type: 'image/jpeg' });

getFileType(pdf); // 'pdf'
getFileType(jpeg); // 'image'

Parameters:

Requires:

• module:Other.checkFileType

Returns:

Type

"image" | "audio" | "video" | "pdf" | "word" | "excel" | undefined

(static) getImageInfo(img, ajaxOptionsopt) → {Promise.<ImageInfo>}

Description:

• 获取图片信息。

  注意：该方法仅适用于浏览器端。

Source:

• getImageInfo.js, line 64

Since:

• 4.20.0

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
});

Parameters:

Returns:

Type

Promise.<ImageInfo>

(static) getMimeType(fileName)

获取常用的 MIME 类型。通过文件名后缀查找对应的 MIME 类型。

Description:

• 内置常用的 MIME 类型和文件名后缀映射

  MIME 类型	文件名后缀
  text/plain	txt
  text/css	css
  text/html	htm html
  text/javascript	js mjs
  text/csv	csv
  text/markdown	md markdown
  image/gif	gif
  image/jpeg	jpg jpeg jfif pjpeg pjp
  image/png	png
  image/svg+xml	svg
  image/webp	webp
  image/apng	apng
  image/avif	avif
  image/bmp	bmp
  image/x-icon	ico cur
  image/tiff	tif tiff
  application/xml	xml
  application/zip	zip
  application/pdf	pdf
  application/json	json
  application/yaml	yaml yml
  application/vnd.openxmlformats-officedocument.wordprocessingml.document	doc docx
  application/vnd.openxmlformats-officedocument.spreadsheetml.sheet	xls xlsx
  audio/mp3	mp3
  audio/wav	wav
  audio/aac	aac
  audio/flac	flac
  video/mp4	mp4
  video/ogg	ogg
  video/webm	webm
  video/quicktime	mov

Source:

• getMimeType.js, line 100

Since:

• 5.2.0

See:

• MIME 类型（IANA 媒体类型）
• Media Types

Example

getMimeType('xxx.png'); // 'image/png'
getMimeType('xxx.jpg'); // 'image/jpeg'
getMimeType('xxx.mp3'); // 'audio/mp3'
getMimeType('xxx.mp4'); // 'video/mp4'
getMimeType('xxx.pdf'); // 'application/pdf'
getMimeType('xxx.zip'); // 'application/zip'
getMimeType('xxx.doc'); // 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'

// 不常用或未知类型
getMimeTye('xxx.ci'); // undefined

// 非法文件名
getMimeType('.zip'); // undefined

Parameters:

Returns:

(static) injectStyle(css, optionsopt) → {HTMLStyleElement}

Description:

• 注入样式。

Source:

• injectStyle.js, line 26

Since:

• 5.3.0

Example

const css1 = 'body { background-color: red; }';
injectStyle(css1);

// 自定义配置
const css2 = 'p { margin: 10px; } a { color: blue; }';
injectStyle(css2, {
  container: document.body,
  insertAt: 'bottom'，
  onBefore(style){
    style.nonce = '...';
  }
});

Parameters:

Returns:

Type

HTMLStyleElement

(static) loadImage(img) → {Promise.<HTMLImageElement>}

Description:

• 加载图片。

  注意：该方法仅适用于浏览器端。

Source:

• loadImage.js, line 27

Since:

• 4.20.0

Example

loadImage(file).then(image=>{
   // do something
});

loadImage('https://dummyimage.com/200x300').then(image=>{
  // do something
});

loadImage('data:image/png;base64,PGEgaWQ9ImEiPjxiIGlkPSJiIj5oZXkhPC9iPjwvYT4=').then(image=>{
  // do something
});

Parameters:

Returns:

Type

Promise.<HTMLImageElement>

(static) loadImageWithBlob(img, ajaxOptionsopt) → {Promise.<ImageWithBlob>}

Description:

• 加载图片，返回图片元素和 blob 对象。

  如果传入图片地址，将通过 ajax 请求转为 blob 格式。

  注意：该方法仅适用于浏览器端。

Source:

• loadImageWithBlob.js, line 37

Since:

• 4.20.0

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
});

Parameters:

Returns:

Type

Promise.<ImageWithBlob>

(static) loadScript(src, optionsopt) → {Promise.<HTMLScriptElement>}

Description:

• 加载 js 文件。

  注意：该方法仅适用于浏览器端。

Source:

• loadScript.js, line 27

Since:

• 4.19.0

Example

loadScript('some.js').then(script=>{
  // do something
})

loadScript('some.js', { id: 'xxx', async: false, attrs: { foo: 'bar' } }).then(script=>{
  // do something
})

Parameters:

Returns:

Type

Promise.<HTMLScriptElement>