如何在JavaScript中将图像转换为base64

Question

我正在尝试编写一个文件上传脚本，用于安全的企业内部网络，并遇到了一些小问题...在下面的代码中，我没有收到任何错误信息，所有的调试都表明一切正常，但最终结果总是一个“空白”图像：

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;

当我在“检查元素”中查看“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">

为什么我的图片显示为空白？

- Nicolai Dutka

---

我认为问题出在将 'img' 的 'src' 设置为文件上：img.src = $('#UpdateImage:file'); 然后将其转换为 'dataURL'，这会给我一个始终为空的 base64 字符串，因为它没有使用实际的图像信息... - Nicolai Dutka

可能是重复的问题：如何使用JavaScript将图像转换为Base64字符串 - HaNdTriX

关于@HaNdTriX的链接，请查看他编写的函数，它似乎非常有效。**图片转Base64** - WASasquatch

Answer 1

发现这个。

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>

---

编辑：

来源：如何使用javascript将图像转换为base64字符串

- Cory

---

编辑了你的一行代码，因为在声明变量时出现了问题，即document.getElementById("imgTest").innerHTML。现在它像魔法一样工作了... :) - user1801972

Answer 2

如果您想在图像加载后获取其数据URL，则应在其加载后获取数据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');

编辑：包含其余代码 编辑2：关于画布及其上下文的愚蠢错误已进行更正

- devnull69

---

这个不起作用...现在我得到的不是空白图像，而是什么都没有。图像没有任何变化，检查元素后发现'src'没有被更新。 - Nicolai Dutka

我希望你只是替换原始代码中的 .onload 部分？你的其余代码应该保持不变。回答已相应地进行了编辑... - devnull69

document.createElement('canvas') 将返回 canvas，而不是 context。 - Le Duc Duy