使用atob()返回canvas toDataUrl()的文件大小

时间:2012-03-15 11:45:27

标签: javascript html5 canvas data-url

我正在尝试从URL将图像加载到画布中,然后获取dataUrl并使用它来查找图像的大小。

结果是图像显示比它应该大得多。

例如,加载60kb图像会导致解码变量返回134kb。

当我在我的电脑上本地存储的图像上运行相同的代码时,从文件输入获取文件对象而返回的值是正确的(例如60kb)。

这是我正在使用的代码:

            var canvas = document.getElementById('canvas');  
            var ctx = canvas.getContext('2d');  
            var img = '/anImage.jpg';
            var image = document.createElement('img'); 

            image.src = img;

            ctx.drawImage(image, 500, 500);  

            ctx.drawImage(image, img.width, img.height);

            var dataUrl =  canvas.toDataURL('image/jpeg');

            var d = dataUrl.substr(dataUrl.indexOf('base64,') + 7);
            var decoded = atob(d);

            var size = decoded.length;

我已尝试使用dataUrl再次输出图像并保存...这仍然会导致图像为134kb而不是原始大小为60Kb。

据我所知,base64编码使图像大1.37左右,但从文件输入中获取图像对象时该值是正确的。

我不确定压缩级别是否丢失?或者我是否可以以某种方式从文件对象中获取它,然后使用它来设置toDataUrl()函数的第二个参数?

我无法在网上找到任何与此有关的信息,因此我们将不胜感激任何信息:)

1 个答案:

答案 0 :(得分:0)

要获取以字节为单位的图像大小,您可以对托管它的图像执行简单的HEAD请求。

例如:

var xhr = new XMLHttpRequest();
xhr.open( 'HEAD', '/anImage.jpg', true );
xhr.onreadystatechange = function(){
    if ( xhr.readyState == 4 ) {
        if ( xhr.status == 200 ) {
            console.log( 'size: ' + xhr.getResponseHeader( 'Content-Length' ) );
        }
    }
};
xhr.send(null);