Мобильный Safari отображает масштабирование на холсте?

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

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

есть ли способ обойти эту ошибку? Это жук?

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

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

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

8
canvas image javascript safari scaling

2 ответов

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

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

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

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

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

30
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 (image, 0, 0, image.ширина, изображение.высота, 0, 0, изображения.ширина, изображение.высота); эта функция исправит сжимать вопрос в iPod больше чем 3Mb. Сначала, если ваше изображение больше 3 мб, вычислите масштабированную ширину и высоту изображения и установите эту ширину и высоту на холст. Затем вызовите функцию drawImage. Это даст окончательный образ того, что вы ожидали...

0