获取图片Base64编码
方式一：Blob和FileReader 对象
实现原理：
使用xhr请求图片,并设置返回的文件类型为Blob对象[xhr.responseType = "blob"]
使用FileReader 对象接收blob
方式二：canvas.toDataURL()方法
实现原理：
使用canvas.toDataURL()方法
需要解决图片跨域问题 image.crossOrigin = ''
使用了Jquery库的$.Deferred()方法
直接上代码：var img = "imgurl"//imgurl 就是你的图片路径
function getBase64Image(img) {
var canvas = document.createElement("canvas")
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext("2d")
ctx.drawImage(img, 0, 0, img.width, img.height)
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase()
var dataURL = canvas.toDataURL("image/"+ext)
return dataURL
}
var image = new Image()
image.src = img
image.onload = function(){
var base64 = getBase64Image(image)
console.log(base64)
}
/**
* 将base64的数据转换成一个Blob对象
* @param {Object} b64Data base64数据
* @param {Object} contentType 数据类型
* @param {Object} sliceSize 分片大小
*/
function b64toBlob(b64Data, contentType, sliceSize) {
let b = b64Data.toString()
b64Data = b.split(',')[1]
var byteCharacters =atob(b64Data)
var byteArrays = []
for (let offset =0offset <byteCharacters.lengthoffset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize)
var byteNumbers =new Array(slice.length)
for (let i =0i <slice.lengthi++) {
byteNumbers[i] = slice.charCodeAt(i)
}
var byteArray =new Uint8Array(byteNumbers)
byteArrays.push(byteArray)
}
var blob =new Blob(byteArrays, {type: contentType})
return blob
}
/**
* 将Blob对象转换为file对象
* @param {Object} theBlob blob对象
* @param {Object} fileName 文件名称
*/
function blobToFile(theBlob,fileName) {
theBlob.lastModifiedDate =new Date()
theBlob.name = fileName
return theBlob
}
// 创建一个reader
let reader =new FileReader()
// 将图片转成 base64 格式
reader.readAsDataURL(file)
/**
* 将base64转换为文件
* @param dataurl base64格式数据
* @param filename 文件名
* @param filetype 文件类型
* @returns {File} 二进制流文件
*/
function dataURLtoFile(dataurl,filename,filetype) {
var arr = dataurl.split(","),
bstr =atob(arr[1]),
n = bstr.length,
u8arr =new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
return new File([u8arr], filename, {
type: filetype
})
}
