为什么图像没有转换成base64？答案

【问题标题】：why image is not converted into base64?为什么图像没有转换成base64？
【发布时间】：2018-08-17 10:11:57
【问题描述】：

我正在尝试将附加图像转换为base64。我尝试过这样，但出现错误。

https://jsbin.com/lubosabore/edit?html,js,console,output

    function getBase64Image(img) {
            // Create an empty canvas element
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;

            // Copy the image contents to the canvas
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0);

            // Get the data-URL formatted image
            // Firefox supports PNG and JPEG. You could check img.src to
            // guess the original format, but be aware the using "image/jpg"
            // will re-encode the image.
            var dataURL = canvas.toDataURL("image/png");

            return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
        }


$(function(){
 // alert()
  $('#fileId').on('change', function (e) {
            console.log('ddd');
            var file = e.target.files[0];
            console.log(getBase64Image(file))
        })
})

我附上了一个png值

它没有打印 base64 值

【问题讨论】：

Uncaught TypeError when calling drawImage function的可能重复
@AndreiGheorghiu 太复杂了——不需要服务器往返。
@user944513 感谢您提供 jsbin 链接，这很有帮助，并且在将来它还有助于在您的问题中包含确切的错误消息。

标签： javascript jquery

【解决方案1】：

当我运行此代码时，我收到以下错误：

TypeError：无法在“CanvasRenderingContext2D”上执行“drawImage”：提供的值不是类型“（CSSImageValue 或 HTMLImageElement 或 SVGImageElement 或 HTMLVideoElement 或 HTMLCanvasElement 或 ImageBitmap 或 OffscreenCanvas）”

所以像e.target.files[0] 这样的File object 将不起作用。我们需要先将其转换为HTMLImageElement。以下是如何做到这一点（来自another answer）：

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img,0,0);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}

现在您有一个HTMLImageElement。但是，您真的不需要它，或者根本不需要它，或者根本不需要 canvas：FileReader 中的 event.target.result 已经是您想要的 data: URL。

【讨论】：

请jsbin链接