Блог

Главная - Вопросы по программированию - Вычислить размер объекта ImageData в [байтах]

Вычислить размер объекта ImageData в [байтах]

#javascript #html #html5-canvas #byte

#javascript #HTML #html5-холст #байт

Вопрос:

Код:

 // Create a new canvas
var canvas = document.createElement('canvas');
canvas.width = canvas.height = 100;
document.body.appendChild(canvas);

// Get drawing context
var ctx = canvas.getContext('2d');

// Get image data
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

Как вычислить размер объекта ImageData в байтах?

Ответ №1:

ImageData.data имеет тип Uint8ClampedArray длиной 1 байт .

Итак: imageData.data.length даст вам размер в байтах, который должен быть равен canvas.width * canvas.height * 4 .
Вы умножаете ширину и высоту на 4, потому что каждый пиксель хранит 4 байта, RGBA .

Комментарии:

1. я получил 307200 байт ==> это значение невероятно

2. @MoathHowari: какую ценность вы ожидаете? Не забывайте, что JPEG-файлы сжимаются и что степень сжатия в 10 и более раз легко достигается с небольшими искажениями.

3. @GameAlchemist но если я преобразовываю холст в изображение и сохраняю его, я не получаю такого большого размера, объясните это

4. Это зависит от того, как сохранить изображение, сжатие в формате jpeg и gif даст разные результаты. Значение , которое вы получаете , — это необработанные данные изображения .

5. Какой формат / качество вы используете? jpeg будет хорошо смотреться на фотографии, когда png будет хорошо смотреться с векторной / мультяшной графикой. Что касается размера необработанных данных: размера, используемого в памяти видеокарты для хранения изображения — в обычном случае — ответ Александра в самый раз: 4 * ширина высота. Фактически, с устройствами hidpi элемент * Canvas будет использовать devicePixelRatio context.backingStoreRatio*4* canvas.width canvas.height , но это уже другая история … html5rocks.com/en/tutorials/canvas/hidpi

Метки: