Base64 Canvas 编码方法的大小有限

Question

我希望这里有人可以提供帮助。

下面的函数正确地从我网站上的图像创建 base64 字符串。

如果我手动添加更大的 b64 值（从 164k 图像生成），它可以正常工作。

 <img src="data:image/jpeg;base64,/9j/4AA..... etc

但是，如果我在同一张 164k 图像上使用此函数，我只会得到“data:”作为输出值。

画布是否仅限于它可以输出的 DataURL 大小？如果是这样，以编程方式对图像进行编码的更好方法是什么？

谢谢。

<script type="text/javascript">
function imageFetch(imgpath, imgname)               
{
    imageObj = new Image();
    imageObj.src = imgpath + imgname;                                       

    var canvas = document.createElement('canvas');                      
    canvas.width = imageObj.width;                                      
    canvas.height = imageObj.height;                                    

    var canvasContext = canvas.getContext('2d');                        
    canvasContext.drawImage(imageObj, 0, 0, canvas.width, canvas.height);   

    var lenImgName = imgname.length;                                    
    var imgType = imgname.substring(lenImgName-3,lenImgName);           

    if (imgType == "jpg")                                               
    {
        base64Data = canvas.toDataURL('image/jpeg');                        
    }
    if (imgType == "png")                                               
    {
        base64Data = canvas.toDataURL('image/png');                     
    }
    return base64Data;                                                  
}

Answer 1

正如 brodney 所指出的，如果画布的宽度或高度为 0，您将得到此结果，这是因为您在将画布大小设置为图像的宽度和高度之前没有等待图像加载，并且如果图像未完全加载，则这些属性返回 0。