我正在尝试将图像从 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() 函数的第二个参数?
我在网上找不到与此相关的任何信息,因此任何信息将不胜感激:)