Squeak.ru - шаблоны программирования

Как игнорировать данные exif изображения на холсте в Chrome 81+

Когда я вызываю context.drawImage в Chrome 81+, изображение автоматически поворачивается. Я хочу отключить это. Я могу отключить его в теге img, используя image-orientation:none, но это не работает на холсте.

Кажется, он игнорирует стиль ориентации изображения. В приведенном ниже примере тег img не поворачивается автоматически (как ожидалось), но холст вращается, несмотря на попытки его отключить.

Как вы предотвращаете вращение drawImage на основе данных exif или, по крайней мере, обнаруживаете, что это произошло?

<html>
<head>
    <script>
    window.onload = function() {
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      var img = document.getElementById("imgtest");
      // This style is ignored
      img.style.imageOrientation = 'none';
      ctx.drawImage(img, 0, 0);
    };
    </script>
</head>
<body>
    <p>
        <img id="imgtest" style="image-orientation:none;" src="portrait.jpg"/>
        <canvas id="myCanvas" width="240" height="297"></canvas>    
    </p>
</body>
</html>

Ответы:


1

Я нашел обходной путь к моей собственной проблеме. Я использую библиотеку обнаружения функций modernizr.com, чтобы узнать, что браузер автоматически поворачивает изображения.

if(Modernizr.exiforientation) {
  // Browser does the image rotation
} 

Я бы предпочел решение, которое не требует новой библиотеки, но это работает.

09.06.2020
Новые материалы

Угловая структура архитектуры
Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..

«Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..

Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...

Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..

Создайте API с помощью Python FastAPI
Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..

Веселье с прокси-сервером JavaScript
Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..

Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...