Блог

Главная - Вопросы по программированию - холст больших изображений с FF

холст больших изображений с FF

#html #image #firefox #canvas #large-files

#HTML #изображение #firefox #холст #большие файлы

Вопрос:

у меня есть Пронлем с большими файлами изображений, чтобы отобразить его на холсте с помощью FileReader. С маленькими изображениями это работает нормально, в Chrome и с большими изображениями тоже. Но в Firefox он ничего не отображает, и после toDataURL он выдает черное изображение. Размер изображения составляет 5580 * 8333 (8 МБ). Если я загружаю dataURL из FileReader в тег изображения, это тоже работает.

 var reader  = new FileReader();

    reader.onloadend = function () {
    preview.src = reader.resu<
console.log(reader.result);

                        var canvas = document.getElementById("resize");
                        var ctx = canvas.getContext("2d");

                        var image = new Image();
                        image.src = reader.resu<
                        image.onload = function() {

                            var MAX_WIDTH = 400;
                            var MAX_HEIGHT = 300;
                            var tempW = image.width;
                            var tempH = image.height;
                            if (tempW > tempH) {
                                if (tempW > MAX_WIDTH) {
                                   tempH *= MAX_WIDTH / tempW;
                                   tempW = MAX_WIDTH;
                                }
                            } else {
                                if (tempH > MAX_HEIGHT) {
                                   tempW *= MAX_HEIGHT / tempH;
                                   tempH = MAX_HEIGHT;
                                }
                            }
                            image.width=tempW;
                            image.height=tempH;
                            canvas.width = tempW;
                            canvas.height = tempH;
                            ctx.drawImage(image, 0, 0, tempW, tempH);
                        };

                      }

                      if (file) {
                        reader.readAsDataURL(file);
                      } else {
                        preview.src = "";
                      }
                    }

Спасибо за помощь

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

1. рекомендуем оптимизировать ваши изображения с помощью jpg-optimiser.com или tinypng.com перед загрузкой их в ваше приложение. изображения будут такими же, только меньшего размера

2. Я загружаю изображение на холст, потому что хочу изменить размер изображения на стороне клиента

3. как я уже сказал, изображения будут иметь точно такие же размеры, но меньший размер ФАЙЛА, вам действительно следует больше узнать об оптимизации изображений

4. Все браузеры имеют разные максимальные размеры, которые они поддерживают для canvas. К сожалению, вы достигли предела FireFox.

5. Спасибо fopr за быстрый ответ

Метки: