Mobile Safari отображает <img src="data:image/jpeg;base64..."> на холсте?

Я пытаюсь отобразить локальное изображение, загруженное с помощью объекта FileReader на Canvas на Safari Mobile на iOS6. Но каждое изображение с URL-адресом данных становится вертикально масштабированным. Это ошибка? В Chrome это отображается правильно.

Демо Script

ScreenShot от iOS6 (выше: холст, ниже: оригинальное изображение)

Есть ли способ обходить эту ошибку? Это ошибка?

Если сначала изменить размер изображения на устройстве с помощью приложения "PhotoWizard" (масштабируйте его до ширины 720 пикселей), Canvas отобразит его правильно. Кажется, что проблема с размером изображения или изображениями, сделанными с помощью приложения "Камера":

Рабочий демонстрационный пример Script

Пробовал предложения Джейк Арчибальд, выглядит немного лучше, но по-прежнему получает вертикальное масштабирование:

Я попробовал это сегодня на Galaxy Nexus с установленным Android 4.1.1. Работает так, как ожидалось, так что это действительно похоже на проблему с мобильным Safari:

ScreenShot от Android 4.1.1

Ответ 1

Это может быть связано с ограничением, связанным с ограничением ресурсов iOS Safari. Согласно следующей ссылке, файлы JPEG более 2 М пикселей будут подвыборки.

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15

Я сомневаюсь, что холст в Safari не может правильно обрабатывать эту подвыборку.

Я создал некоторое обходное решение, определяющее, является ли образ субдискретизированным или нет и растягивает его до исходного размера.

https://github.com/stomita/ios-imagefile-megapixel

Ответ 2

var cnv = document.createElement("canvas");
        ctx = cnv.getContext("2d");

        image = new Image();

        image.src = src;

        image.onload = function() {

            var size = scaleSizeRatio(image.width,image.height);
            cnv.width = size[0];
            cnv.height = size[1];
            ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, image.width , image.height);

            var div = container;  
            div.appendChild(cnv);       

        }

ctx.drawImage(изображение, 0, 0, image.width, image.height, 0, 0, image.width, image.height); Эта функция исправит проблему сжатия в iPod более 3 МБ. Сначала, если ваше изображение больше 3 Мб, затем рассчитайте масштабированную ширину и высоту изображения и установите ширину и высоту для холста. Затем вызовите функцию drawImage. Это даст окончательное изображение, что вы ожидали...