简介
在JS中，常见的图片格式有img对象（url）、file对象、base64、blob对象、canvas对象、因为开发业务的需求，需要经常的对文件类型进行转换。
常见的图片格式转化有：
1. URL --- > Base64
转化思路：url -- > <img> --> Canvas --> canvas.toDataURL --> Base64
示例代码：
/**
* URL转base64
* @param url String 图片链接
* @callback Function 获取base64格式后的回调函数
*/
function translateImgToBase64(url,callback){
var canvas = document.createElement('canvas')
context = canvas.getContext('2d')
img = new Image //通过构造函数绘制图片实例
img.crossOrigin = 'Anonymous' //处理图片跨域问题，见拓展1
img.onload = function(){ //该加载过程为异步事件，请先确保获取完整图片
canvas.width = img.width
canvas.height = img.height
context.drawImage(img,0,0) //将图片绘制在canvas中
var URLData = canvas.toDataURL('image/png')
callback(URLData);
canvas = null
}
img.src = url
}
/**
* 获取base64格式的回调函数
* @param URLData 获取的base64格式
*/
function get Base64(URLData){
console.log("base64",URLData)
}
使用示例：
var url = "http://pic44.nipic.com/20140723/18505720_094503373000_2.jpg"
$(".upload").on('click', function () {
getImgToBase64(url, getBase64)
})
拓展一：图片转base64的跨域问题
问题：百度出来的图片地址，可以利用<img>使用，但是有的无法转base64，出现以下报错：
原因：由于Canvas无法对跨域的图片进行操作，在纯前端利用JS通过图片的url(比如百度的图片)转化为base64，则必须使用canvas，所以必须开启允许跨域，除了当前执行canvas前开启跨域（img.crossOrigin = 'Anonymous'）外，服务端也必须开启允许跨域。
2. Base64 ---> Blob
转化思路：base64 --> Uint8Array --> new Blob()
示例代码：
/**
* Base64转Blob
* @param base64 String base64格式字符串
* @param contentType String blob对象的文件类型，如："image/png"
*/
function translateBase64ImgToBlob(base64,contentType){
var arr = base64.split(',') //去掉base64格式图片的头部
var bstr = atob(arr[1]) //atob()方法将数据解码
var leng = bstr.length
var u8arr = new Uint8Array(leng)
while(leng--){
u8arr[leng] = bstr.charCodeAt(leng) //返回指定位置的字符的 Unicode 编码
}
var blob = new Blob([u8arr],{type:contentType})
var blobImg = {}
blobImg.url = URL.createObjectURL(blob ) //创建URL,
blobImg.name = new Date().getTime() + '.png'
return blobImg
使用示例：
var base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA...此处省略 ...q"
$(".upload").on('click', function () {
var URLData = translateBase64ImgToBlob(base64,"image/jpeg")
$("#img123").attr("src",URLData.url)
})
拓展二：Base64数据解（编）码方法
（1）btoa（）
btoa（） 方法用于创建一个base64编码的字符串。该方法使用 "A-Z", "a-z", "0-9", "+", "/" 和 "=" 字符来编码字符串。
语法：window.btoa(str)
str 必需项，要编码的字符串
返回值：返回一个base64编码的字符串
（2）atob（）
atob() 方法用于解码使用 base-64 编码的字符串。
语法：window.atob(encodedStr)
encodedStr 必需项，一个通过btoa（）方法编码的字符串
返回值：返回一个解码的字符串
拓展三：Uint8Array数组类型
Uint8Array数组类型表示一个8位无符号整型数组，创建时内容被初始化为0，创建完成后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。
语法格式：
new Uint8Array()
new Uint8Array(length) //创建初始化为0的，包含length个元素的无符号整型数组
上述示例中的u8arr打印结果如下：
<meta charset="utf-8">
3. Base64 ---> file
转化思路：base64 --> Uint8Array --> new File（）
示例代码：
/**
* Base64转
* @param base64 String base64格式字符串
* @param contentType String file对象的文件类型，如："image/png"
* @param filename String 文件名称或者文件路径
*/
function translateBase64ImgToFile(base64,filename,contentType){
var arr = base64.split(',') //去掉base64格式图片的头部
var bstr = atob(arr[1]) //atob()方法将数据解码
var leng = bstr.length
var u8arr = new Uint8Array(leng)
while(leng--){
u8arr[leng] = bstr.charCodeAt(leng) //返回指定位置的字符的 Unicode 编码
}
return new File([u8arr],filename,{type:contentType})
}
使用示例：
var base64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgA...此处省略 ...q"
$(".upload").on('click', function () {
var result = translateBase64ImgToFile(base64,"testImg.png","image/png")
console.log(result )
})
打印结果：
4. Blob（File） ---> Base64
转化思路：利用FileReader的readAsDataURL，将blob转为base64
示例代码：
/**
* Blob转Base64
* @param base64 String base64格式字符串
* @param callback Function 获取转换结果e.target.result后执行的回调函数
*/
function translateBlobToBase64(blob,callback){
var reader = new FileReader()
reader.onload = function(e){
callback(e.target.result)
}
reader.readAsDataURL(blob)
//读取后，result属性中将包含一个data:URL格式的Base64字符串用来表示所读取的文件
}
注：file对象其实也是Blob对象的一种，故转换为base64的方式一样
5. Canvas ---> Base64
转化思路：利用HTMLCanvasElement的API .toDataURL() 返回一个包含图片展示的 data URL ，默认格式为png
示例代码
$("#confirm").on("click", function () {
var img_canvas = document.getElementsByTagName('canvas')
var base64URL = img_canvas.toDataURL("image/png");
$(".canvas").html(``)
});
6. Canvas ---> Bolb
转化思路：利用HTMLCanvasElement.toBlob() 方法创造Blob对象，用以展示canvas上的图片
示例代码：
$("#confirm").on("click", function () {
var img_canvas = gdocument.getElementsByTagName('canvas')
img_canvas.toBlob(function (blob) {
var url = URL.createObjectURL(blob);
$(".canvas").html('');
})
});
