將圖片轉換為base64 格式

1.頁面上的圖片，轉換成base64格式，可以通過canvas 的 toDataURL 

例子：給定圖片的url 將圖片轉換為base64

var imageSrc = "../images/0.jpg"; // 圖片的URL

//@param image:Image 對象，ext:圖片的格式(jpg)
function getBase64Image(image,ext){
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var context = canvas.getContext("2d");
context.drawImage(image,0,0,image.width,image.height);

// 這里是不支持跨域的
var base64 = canvas.toDataURL("image/"+ext);
return base64;

}

var image = new Image();
//image.crossOrigin=""; // 如果圖片是跨域的，填上"*"或者"anonymous" 核心是請求頭中包含了 Origin: "anonymous"或"*" 字段，響應頭中就會附加上 Access-Control-Allow-Origin: * 字段,

image.src = imageSrc;

image.onload = function(){
var ext = imageSrc.substring(imageSrc.lastIndexOf(".")+1);
var base64 = getBase64Image(image,ext);
console.log(base64);
//alert(base64);
}

2.將已經顯示在頁面上的圖片轉換為base64

<img src="https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg" alt="" crossorigin="*">

如果是跨域的圖片，要加上 crossorigin 屬性

setTimeout(function(){
console.log(getBase64Image(document.getElementsByTagName("img")[0],"jpg"));
},3000);

 

 

2.文件選擇圖片時，轉換成base64

使用FileReader api  readAsDataURL  FileReader AIP 地址 https://developer.mozilla.org/en-US/docs/Web/API/FileReader

 例子：

<input type="file" value="sdgsdg" id="demo_input" />

window.onload = function(){
var file = document.getElementById("demo_input");
file.onchange = function(){
var file = this.files[0];
alert(file.type);
if(!/image/.test(file.type));
return;
var reader = new FileReader();
reader.readAsDataURL(file)
reader.onload = function(){
alert(this.result);
}
}

}