您好，我從如何使用 JavaScript 將影像轉換為 Base64 字串中找到了與該主題相關的一些答案？我意識到他們在 div 標簽上沒有影像是否有可能如果我有影像源
為想要參考的人添加了答案
function encodeImageFileAsURL() {
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
var newImage = document.createElement('img');
newImage.src = srcData;
document.getElementById("output").src = newImage.src;
alert("Converted Base64 version is " document.getElementById("output").src);
console.log("Converted Base64 version is " document.getElementById("output").src);
}
fileReader.readAsDataURL(fileToLoad);
}
}<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<img src="https://mdbootstrap.com/img/Photos/Others/placeholder-avatar.jpg" id="output" width="100" height="100" style="border-radius: 50%;" />所以我想使用影像源來加載影像并發現 base 64 是否可能？除了使用 div 在無法自定義的地方創建 1 個影像之外
uj5u.com熱心網友回復：
嗨，我想你想這樣做https://jsfiddle.net/samet19/yv9a4op8/
function encodeImageFileAsURL() {
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
var newImage = document.createElement('img');
newImage.src = srcData;
document.getElementById("output").src = newImage.src;
}
fileReader.readAsDataURL(fileToLoad);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/391777.html
標籤：javascript html base64
上一篇：如何在React(Next.js)中獲取useState中的多個檔案？
下一篇：單擊下拉選單什么都不做