时间戳

首页 > 解决方案 > HTML5 Canvas 在缩小时旋转从某些移动设备捕获的图像

javascript - HTML5 Canvas 在缩小时旋转从某些移动设备捕获的图像

问题描述

我偶然发现了这种非常不寻常的行为。我使用从设备相机捕获图像accept="image/*"，然后使用画布按比例缩小，some mobile devices图像以逆时针方向旋转 90 度。我遇到这个 IOS 版本低于 13.4.1 的 iPhone

$('#photo').on('change', PreviewImage);

function PreviewImage()
{
  let img = new Image();
  img.src = URL.createObjectURL(this.files[0]);
  img.onload = function()
  {
    var canvas  = document.createElement('canvas');
    var context = canvas.getContext('2d');

    const f = img.width / 512;

    canvas.width = img.width / f;
    canvas.height = img.height / f;

    context.drawImage(img, 0, 0, canvas.width, canvas.height);

    $('#preview').prop('src', canvas.toDataURL('image/jpeg'));
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <input id="photo" type="file" accept="image/*" capture="user">
  <br>
  <img id="preview">
</body>

这里还有 codepen url，以防您在移动设备上看不到代码片段https://codepen.io/sarge/pen/oNjJpBR

编辑：我只是尝试删除缩放部分以确保这是原因，确实绘制全尺寸，然后使用 toDataURL 工作正常，问题仅在图像按比例缩小时出现。

编辑：在有这个问题的手机上，我在 Firefox、Chrome 和 Safari 上进行了测试。所有浏览器都会产生这个问题，可以肯定地说这与浏览器无关。

编辑： EXIF 剥离不起作用。

编辑：这是我在 Iphone 6 (12.4.5) 上获得的屏幕截图，您可以看到输入中的微小预览看起来正确。 在此处输入图像描述

标签： javascripthtmlimagehtml5-canvas

解决方案

推荐阅读