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.

Base64 Canvas编码方法大小有限

1 个答案: