js 将图片转换为base64编码

JavaScript015

js 将图片转换为base64编码,第1张

将图片转换为Base64

获取图片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)

}