介绍图片文件资源。
实际开发中,如何正确处理图片资源。

目录

  1. 与图片相关的数据类型有哪些
  2. 图片各种数据类型间转换
  3. src属性值可以是哪些
  4. 获取图片宽高等数据

与图片相关的数据类型有哪些

  1. image对象(js)=> appendTo Body => img元素(dom)
  2. dataUrl(base64、url)
  3. file(基于blob)文件对象
  4. canvas对象

图片各种数据类型间转换

环境区分

src属性值可以是哪些

  1. url地址
  2. base64

获取图片宽高等数据

1
2
3
4
5
6
7
8
const img = new Image()

// 图片对象读取完毕后即可获取图片相关属性
img.onload = function () {
const width = this.width
const height = this.height
}
img.src = 'xxxxxxxx'