Html 如何在 JavaScript 中将图像转换为 base64
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19644035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to convert an image to base64 in JavaScript
提问by Nicolai Dutka
I'm trying to write a file upload script for use in a secure corporate intranet and having just a little trouble...
我正在尝试编写一个文件上传脚本以在安全的企业内部网中使用，但遇到了一些麻烦......
In the following code, I get no errors and all my debugging looks like everything is working, but the end result is always a 'blank' image:
在下面的代码中，我没有收到任何错误，我所有的调试看起来都在正常工作，但最终结果始终是一个“空白”图像：
var ctx = document.createElement('canvas');
var img = new Image();
img.onload = function(){
ctx.drawImage(img,0,0);
}
img.src = $('#UpdateImage:file');
var imgStr = ctx.toDataURL("image/png", "");
document.getElementById("Item_Create_Image_Avatar").src = imgStr;
When I "inspect element" on the 'Item_Create_Image_Avatar' object, the 'src' value looks absolutely perfect:
当我在 'Item_Create_Image_Avatar' 对象上“检查元素”时，'src' 值看起来非常完美：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAACWCAYAAABkW7XSAAAEYklEQVR4Xu3UAQkAAAwCwdm/9HI83BLIOdw5AgQIRAQWySkmAQIEzmB5AgIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlAABg+UHCBDICBisTFWCEiBgsPwAAQIZAYOVqUpQAgQMlh8gQCAjYLAyVQlKgIDB8gMECGQEDFamKkEJEDBYfoAAgYyAwcpUJSgBAgbLDxAgkBEwWJmqBCVAwGD5AQIEMgIGK1OVoAQIGCw/QIBARsBgZaoSlACBB1YxAJfjJb2jAAAAAElFTkSuQmCC" id="Item_Create_Image_Avatar" style="vertical-align:top">
Why is my image coming in as blank?
为什么我的图像是空白的？
回答by Cory
Found This.
找到了这个。
Select a File to Load:
<input id="inputFileToLoad" type="file" onchange="loadImageFileAsURL();" />
<div id="imgTest"></div>
<script type='text/javascript'>
function loadImageFileAsURL(){
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 divTest = document.getElementById("imgTest");
var newImage = document.createElement('img');
newImage.src = srcData;
divTest.innerHTML = newImage.outerHTML;
}
fileReader.readAsDataURL(fileToLoad);
}
}
</script>
EDIT:
编辑：
Source: How to convert image into base64 string using javascript
回答by devnull69
If you want to get the Data URL of the image after it loaded, you should get the Data URL after it loaded
如果你想在加载后获取图片的Data URL，你应该在加载后获取Data URL
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
imgStr = canvas.toDataURL("image/png", "");
document.getElementById("Item_Create_Image_Avatar").src = imgStr;
}
img.src = $('#UpdateImage:file');
EDIT: Included the rest of the code EDIT2: Edited stupid error regarding canvas and its context
编辑：包括其余的代码 EDIT2：编辑关于画布及其上下文的愚蠢错误
