首先，我们对 img，file，base64，canvas，blob，blob url，url解析一下
img：标签实例，下面有几种创建方式，
document.getElementById("d01").innerHTML = "<img src='http://xxx.jpg'/>"
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获取到了图片数据格式
我们看到，里面包含了图片文件名称，大小，最近修改时间以及文件类型这些基础信息
canvas：画布，html5的一个标签元素，用于绘制图像（通过脚本，通常是JavaScript）；不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） ，您必须使用脚本来完成实际的绘图任务。
这里有一些例子参考：（有代码与运行结果）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)
}
好像是这些了，如有遇到什么需要转换的，可以告诉我，我加上去~
