將圖片轉換為Base64編碼的JS實現方法

在web開發中，我們經常需要處理圖片，而在某些場景下，我們需要將圖片嵌入到HTML文本中，這時使用Base64編碼的方式將圖片轉換為字符串十分方便。本文將介紹如何使用JS實現將圖片轉換為Base64編碼的功能。

一、選取圖片的方式

在使用JS將圖片轉換為Base64編碼之前，我們需要先選取圖片。有多種方法可以選取圖片，包括：

1. 直接使用圖片的URL

可以直接將圖片的URL作為參數傳入JS函數中：

function getBase64FromUrl(imgUrl) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        var base64Data = canvas.toDataURL('image/png');
        console.log(base64Data);
    };
    img.src = imgUrl;
}

使用這種方式選取圖片需要注意跨域問題，需要使用`crossOrigin`屬性，並且服務器也需要設置相關的響應頭。

2. 使用input標籤選擇文件

可以使用input標籤的type為file的特性，讓用戶選擇本地文件，並將選取的文件傳入JS函數中：

function getBase64FromFile(file) {
    var reader = new FileReader();
    reader.onload = function(event) {
        var base64Data = event.target.result;
        console.log(base64Data);
    };
    reader.readAsDataURL(file);
}

document.getElementById('file-input').addEventListener('change', function(e) {
    getBase64FromFile(e.target.files[0]);
});

使用這種方式選取圖片需要注意，在獲取文件數據之前，需要使用FileReader對象將文件讀入內存。

二、將圖片轉換為Base64編碼的步驟

選取圖片後，我們需要將圖片轉換為Base64編碼。這個步驟可以分為以下幾個步驟：

1. 創建Canvas對象

我們需要創建一個Canvas對象，將圖片繪製到Canvas上：

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');

2. 繪製圖片到Canvas上

我們將選取的圖片繪製到Canvas上：

var img = new Image();
img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
};
img.src = imgUrl;

3. 將Canvas轉換為Base64編碼

我們使用Canvas的toDataURL方法將Canvas對象轉換為Base64編碼：

var base64Data = canvas.toDataURL('image/png');
console.log(base64Data);

我們可以選擇將Canvas轉換為其他格式的Base64編碼，比如JPEG格式：

var base64Data = canvas.toDataURL('image/jpeg', 0.5);
console.log(base64Data);

在將Canvas轉換為Base64編碼時，我們還可以設置圖片的質量，第二個參數表示質量係數，範圍為0~1。

三、完整代碼

下面是將圖片轉換為Base64編碼的JS函數：

function getBase64FromUrl(imgUrl) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    var img = new Image();
    img.crossOrigin = 'Anonymous';
    img.onload = function() {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        var base64Data = canvas.toDataURL('image/png');
        console.log(base64Data);
    };
    img.src = imgUrl;
}

function getBase64FromFile(file) {
    var reader = new FileReader();
    reader.onload = function(event) {
        var base64Data = event.target.result;
        console.log(base64Data);
    };
    reader.readAsDataURL(file);
}

使用方法：

var imgUrl = 'http://example.com/image.png';
getBase64FromUrl(imgUrl);

document.getElementById('file-input').addEventListener('change', function(e) {
    getBase64FromFile(e.target.files[0]);
});

四、總結

使用JS將圖片轉換為Base64編碼十分簡單，我們只需要選取圖片，將圖片繪製到Canvas上，再將Canvas轉換為Base64編碼即可。在實際開發中，我們可以根據具體的需求選擇不同的選取圖片的方式以及不同的Base64編碼格式。