JavaScript を使用して画像を Base64 文字列に変換する
JavaScript には、画像の URL または画像をローカル PC から base64 文字列に変換する規則があります。この文字列には、さまざまな記号や文字を含めることができます。
canvas 要素の作成、その要素への画像の読み込み、および toDataURL を使用した文字列表現の表示について説明します。また、file reader オプションを使用して、base64 文字列表現を取得します。
JavaScript で canvas を使用して画像を Base64 文字列に変換する
この場合、canvas 要素を作成し、そのディメンションを定義します。これは、文字列表現を格納する dataURL です。
オンラインソースからランダムな画像を追加し、セキュリティの問題を回避するために、object.crossOrigin = 'Anonymous' を指定します。最後に、コールバック関数は dataURL を toDataURL 関数に移動して、対応する画像の base64 文字列をプレビューするようにウィンドウに警告します。
コードスニペット：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>
img{
height: 200px;
}
</style>
</head>
<body>
<img src="https://images.unsplash.com/photo-1606115915090-be18fea23ec7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80" id="myImg">
<script>
function toDataURL(src, callback){
var image = new Image();
image.crossOrigin = 'Anonymous';
image.onload = function(){
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
canvas.height = this.naturalHeight;
canvas.width = this.naturalWidth;
context.drawImage(this, 0, 0);
var dataURL = canvas.toDataURL('image/jpeg');
callback(dataURL);
};
image.src = src;
}
toDataURL('https://images.unsplash.com/photo-1606115915090-be18fea23ec7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=465&q=80', function(dataURL){
alert(dataURL);
})
</script>
</body>
</html>
出力：
JavaScript で FileReader を使って画像を Base64 文字列に変換する
ファイル読み取り規則では、新しいオブジェクトを動的に初期化します。オブジェクトは onload メソッドをトリガーし、base64 文字列を出力します。input 要素は、アップロードによってローカルコンピュータから画像を取得しています。
コードスニペット：
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<input type="file" name="" id="fileId"
onchange="Uploaded()">
<br><br>
<button onclick="display()">
Display String
</button>
</body>
</html>
var base64String = '';
function Uploaded() {
var file = document.querySelector('input[type=file]')['files'][0];
var reader = new FileReader();
reader.onload = function() {
base64String = reader.result.replace('data:', '').replace(/^.+,/, '');
imageBase64Stringsep = base64String;
} reader.readAsDataURL(file);
}
function display() {
console.log('Base64String about to be printed');
alert(base64String);
}
出力：
チュートリアルを楽しんでいますか？ <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe
