1

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

下面的函数正确地从我网站上的图像创建 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;                                                  
}

4

1 回答 1

1

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

于 2012-08-20T06:29:20.137 回答