Возврат размера файла холста toDataUrl () с помощью atob () - PullRequest
Новая
       21

Возврат размера файла холста toDataUrl () с помощью atob ()

0 голосов
/ 15 марта 2012

Я пытаюсь загрузить изображение на холст с URL-адреса, а затем получить dataUrl и использовать его, чтобы узнать размер изображения.

В результате изображение показывается намного больше, чем должно быть.

Например, загрузка изображения размером 60 КБ приводит к тому, что декодированная переменная возвращает значение 134 КБ.

Когда я запускаю тот же код для изображения, хранящегося локально на моем компьютере, вместо этого получается объект файла из файлового ввода, и возвращаемое значение является правильным (например, 60 КБ).

Это код, который я использую: 

            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 снова вывести изображение и сохранить его ... в результате изображение по-прежнему составляет 134 КБ, а не оригинальный размер 60 КБ.

Я понимаю, что кодировка base64 делает изображение в 1,37 или более раз больше, но при получении объекта изображения из файла вводится правильное значение.

Я не уверен, что уровень сжатия теряется? Или я могу как-то получить это из файлового объекта и затем использовать его, чтобы установить второй параметр для функции toDataUrl ()?

Я не могу найти какую-либо информацию, относящуюся конкретно к этому онлайн, поэтому любая информация будет оценена:)

1 Ответ

0 голосов
/ 15 марта 2012

Чтобы получить размер изображения в байтах, вы можете сделать простой 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);
...