У меня есть загрузчик HTML5 для изображений. Я загружаю два изображения для любого изображения, которое выбрал пользователь. Один 64х64, другой 320х240. Я использую canvas.drawImage() для изменения размера изображений. Все работает нормально.
Однако как я могу убедиться, что изображения после изменения размера составляют ‹= 1 МБ. Зависит ли размер изображения после изменения размера от используемого браузера?
320px x 240px x 24bit = 1,843,200 bits = 230,400 bytes. Он не должен превышать 1 МБ. (Калькулятор) 24.02.2014 Вы не можете гарантировать размер, так как итоговый сжатый файл зависит от того, насколько хорошо он будет сжат.
Если у вас есть изображение с высокой частотой (много деталей, шум и т. д.), то его будет сложнее сжать, и вам нужно использовать более высокую настройку качества (для JPEG), чтобы отфильтровать больше данных.
Однако вы можете рассчитать необработанный размер изображения. Canvas 32-битный, то есть три 8-битных канала для RGB (24-бит) + один 8-битный канал для альфа-канала.
Если вы сохраните свои изображения в формате PNG, у вас будет RGBA - размер для этого:
width * height * 4 = size in bytes
Если вы сохраните в формате JPEG, у вас будет только RGB:
width * height * 3 = size in bytes
JPEG может быть сжат сильнее, чем PNG, поэтому вы можете уменьшить размер, используя дополнительный параметр качества для toDataURL(type [, quality= [0.0, 1.0]]).
Для вашего примера размер raw будет следующим:
320 x 240 x 4 = 307 200 bytes (/ 1024 = 300 kb / 1024 = 0.29 mb).
и с RGB (без альфы)
320 x 240 x 3 = 230 400 bytes (/ 1024 = 225 kb / 1024 = 0.22 mb).
Когда изображение преобразуется в data-URI, содержимое кодируется как base-64. Base-64 всегда добавляет 33% к размеру из-за способа кодирования данных (плюс небольшой заголовок, чтобы фактически сделать его data-uri, IIRC около 14-20 байт).
В любом случае, в этом случае вы должны быть в пределах 1 МБ.
