H5 图片数据的各种存在形态与相互的转化方式

首先，我们对 img，file，base64，canvas，blob，blob url，url解析一下

img：标签实例，下面有几种创建方式，

document.getElementById("d01").innerHTML = ""

var d02 = document.getElementById("d02")
var img = document.createElement("img")
img.src = "http://xxx.jpg"
d02.appendChild(img)

var d03 = new Image()
d03.src = "http://xxx.jpg"
document.getElementById("d03").appendChild(d03)

url：图片请求链接，应该都知道`http://cdn.xyxiao.cn/Landscape_1.jpg`，它是图片的地址，图片文件还在服务器那边

base64: 图片的数据url，特点是很长，例如：

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAaCAYAAACkVDyJAAAABGdBTUEAALGPC/xhBQAAA3FJREFUSA3FlctPU0EUxntbCikBFFmgBYIJiUs3lFYTElGgiEsT/wAFFDQaH4m67Mb4iI+4EEFx5crADhIVjSGpbekDBcWVOwI0UdBAm7RJX37fde7NLbS9BUycZHLOzJn5fnPunYfB8L9Ky99yMpPJSP9yDTabrRvSRxRNWby5udksSdIKYFUIjIRCobNoZ5RB27XQvY25N6GVNJvNtT6f75eRYjMzMwnApoVwL1Y1vNNMkdUdwoTmvNfr/U1fBtIpKSk5BaNA+3YCxdy76XT6BnWR3bfS0tIu5YupQL/fvw5olxaKVQ5tNVPA7mHOdQGbt1gsR5HdD7ZZNm0Qh8NRlUwmJxFzyAMkaTgYDA4oK2RfvoJ/dh+xayL+tby8vN3tdv/Ujt8EZHA7UGT2AJldFeJfYNuxN1ZEWzU5gYxitbuQ1SRE7GzDH0Km53NlCthDjLvCcSh5YQyq/5ANbcHq1iDiBCDAfvj9EH4Cm7VI9D3SwOZMJtOxXJkp2lmTlU6tFZm+g2iL6B+E4AX6iD2GuUQfC5s1Go0dgUBgle18RRfIiW1tbbuj0Sg/rwoFIIX2Rcbhf8bB7uDBZrtQKQpIAQFlprYNgp9wzjqLgXFe0UAObm1trY7H498BrZEnS9IqMjtQLIxz8m4aBrUFECkWi91SYIzRTyQSLu04Pd+kN4BxwnDrDMIdYBv/LAQTRrWiOurq6mqWl5dfw9ctukABewrbTzXAghUVFU5s/5e4kTrRtQ/VYbVa94TD4TccU6gUBAoY79NzFAEsAN+Jf7a2sLAQb2pqGt0ArdaD5gUShkP9DJw+sWI/bBcvBNE2KNBUKuVEHzM9hEwLQnMCRWbPIdArxKf5kuBqWxdt1RDa2Ng4iudIheKf7sY/fasO0jibdqnL5TJig4wA2sNx+Iw+wvh8aeZluTwWPPgYO8sA5l7m/Zo1SDSyMiRsYmKCsDOMQ8BbVlZ2HIKRXJO1fYuLizGRKd/UvaiHkWkVMuVTpxYVSNj4+PgLRE4zCpgHsG6Px6MLU9QIra+vH8OC80JVYCQS4QaRM4P9WFlZ2Y3HM6qIFWuXlpZiDQ0No1ooFmFBpu+pIV9tdru9BjtNeSzdgJ2YmpraMky7KKH5AX0HUdOotXy25Ay5KmxnbqA5wHp2CoOOQWiOwd2P6gPsFazhD6wbsCAvi3AUAAAAAElFTkSuQmCC"

data:image/png;base64是它的标志，可以在浏览器上直接显示，它本来就是图片本身，只是以字符串的形式显示而已

File：图片文件，先看看input获取到了图片数据格式

file文件格式.png

我们看到，里面包含了图片文件名称，大小，最近修改时间以及文件类型这些基础信息

canvas：画布，html5的一个标签元素，用于绘制图像（通过脚本，通常是JavaScript）；不过，

这里有一些例子参考：（有代码与运行结果）https://blog.csdn.net/sunshine940326/article/details/76572850

Blob 与 Blob url

首先说说Blob，Binary Large Object的缩写，二进制类型的大对象，代表不可改变的原始数据，在计算机中，Blob常常是数据库中用来存储二进制文件的字段类型
Blob 对象指的是字节序列，并且具有size属性，是字节序列中的字节总数，和一个type属性，它是小写的ASCII编码的字符串表示的媒体类型字节序列
Blob UR，作为图片的请求地址blob:http://xxx
Blob URL只能由浏览器在内部生成。URL.createObjectURL()将创建一个特殊的Blob或File对象的引用，以后可以使用它来释放url，URL.revokeObjectURL()。这些URL只能在浏览器的单个实例中和同一个会话中（即页面/文档的生命周期）在本地使用。不能像普通url可以直接浏览器打开就可以看到图片
详情可以参考这里：
1, https://www.jb51.net/article/144934.htm
2, https://www.jianshu.com/p/75bfd7cd9e1b

==========================================================
大概说了一下它们各自代表的意思，接下来我们来看看它们之间是如何换衣服的

1，通过url加载图片对象

var img = new Image()
img.src = url

2，将图片对象转变为canvas类型对象，image为一个Image对象

function imageToCanvas(image) {
  var canvas = document.createElement("canvas")
  var ctx = canvas.getContext('2d')
  canvas.width = image.width
  canvas.height = image.height
  ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
  return canvas
}

3，将canvas对象变为Blob类型对象

function canvasToBlob(canvas, quality) {
  canvas.toBlob(function(blob) {
    console.log(blob)
  }, 'image/jpeg', quality)
}

4，将canvas对象变为base64数据url

function canvasToDataURL(canvas, quality) {
  canvas.toDataURL('image/jpeg', quality)
}

5，将blob类型转为base64对象

function blobToDataURL(blob) {
  var reader = new FileReader()
  reader.onloadend = function(e) {
    var base64 = e.target.result || e.target.imgSrc
    console.log(base64)
  }
}

6，将base64转为image类型文件

var img = new Image()
img.src = base64
console.log(img)

7，base64转Blob类型对象

function base64ToBlob(base64) {
  var arr = base64.split(',')
  var mime = arr[0].match(/:(.*?);/)[1]
  // 将base64转为Unicode规则编码
  var bstr = atob(arr[1])  
  var n = bstr.length
  var u8arr = new Uint8Array(n)
  while (n--) {
    // 转换编码后才可以使用charCodeAt 找到Unicode
    u8arr[n] = bstr.charCodeAt(n)
  }  
  return new Blob([u8arr], { type: mime })
}

8，blob对象转为File对象

function blobToFile(blob, fileName) {
  // var file = new File(blob, filename, {type: contentType, lastModified: Date.now()});
  var file = new File(blob, fileName)
  console.log(file)
}

好像是这些了，如有遇到什么需要转换的，可以告诉我，我加上去~