使用atob(）将画布的文件大小返回到DataUrl(）

Returning file size of canvas toDataUrl() using atob()

本文关键字：文件大小 返回 DataUrl atob 使用      更新时间：2023-09-26

我正试图从URL将图像加载到画布中，然后获取数据URL并使用它来确定图像的大小。

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

例如，加载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（）函数设置第二个参数？

我在网上找不到任何与此相关的信息，因此任何信息都将不胜感激：）

要获得以字节为单位的图像大小，可以对托管图像的图像执行简单的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);
相关文章：