带有 webp 的canvas.toDataURL 无法在 iPad Chrome 和 Safari 上运行

Question

我正在尝试使用

canvas.toDataURL('image/webp', 0.8);

通过 javascript 操作图像，但尽管它适用于 Android 和 Windows，但它不适用于 IOS (iPad)，它会返回 png。

canvas.toBlob() 也是如此

我在 ipad 上使用 Safari 16.6 和 Chrome 130.0

https://jsfiddle.net/gdp70xsf/

function doConvert() {
  const fileInput = document.querySelector("input[type='file']");
  const img = document.querySelector("img");
  const canvas = document.querySelector("canvas");
  const p = document.querySelector("p");
  const ctx = canvas.getContext("2d");

  const file = fileInput.files[0];

  if (file) {
    const reader = new FileReader();

    reader.onload = function (e) {
      const imgElement = new Image();
      imgElement.src = e.target.result;

      imgElement.onload = function() {
        // Set up the canvas size
        const width = imgElement.width;
        const height = imgElement.height;
        const dpr = window.devicePixelRatio || 1;

        canvas.width = width * dpr;
        canvas.height = height * dpr;

        // Apply scaling and draw image onto canvas
        ctx.scale(dpr, dpr);
        ctx.drawImage(imgElement, 0, 0, width, height);

        // Convert to WebP and display in the img element
        let dataUrl = canvas.toDataURL("image/webp", 0.8);
        img.src = dataUrl;

        p.innerHTML = navigator.userAgent+'<HR>'+dataUrl.substring(0,30)+'...'; // Logging the base64 string for reference
      };
    };

    reader.readAsDataURL(file);
  }
}
</script>

img, canvas {
  width:auto;
  height:50vh;
  vertical-align:top;  
}
canvas {
  border:solid 1px orange;
}
img {
  border:solid 1px red;  
}
div {
  margin:10px;
}

<input type="file" onChange="doConvert()" />
<div>canvas:<canvas></canvas> img:<img /></div>
<div>
  <p></p>
</div>

有没有办法解决这个问题（我需要将

canvas

处理过的图像放回到

<img>

中，作为任何设备类型上的

webp

- 包括 Apple 设备）？

Answer 1

• 这些限制对于 iOS 来说都是真实的：https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482-SW15

• 对于 RAM 小于 256 MB 的设备，解码的 GIF、PNG 和 TIFF 图像的最大大小为 3 兆像素；对于 RAM 大于或等于 256 MB 的设备，最大尺寸为 5 兆像素。

对于 RAM 小于 256 MB 的设备，画布元素的最大尺寸为 3 兆像素；对于 RAM 256 MB 或以上的设备，画布元素的最大尺寸为 5 兆像素。 每个顶级入口点的 JavaScript 执行时间限制为 10 秒。
如果您尝试渲染或读取 6MB 图像，您将收到格式错误的 blob/dataURL 字符串等，因为这些限制不会引发任何问题。当您认为 File API 以及画布方法 toDataURL 和 toBlob 有错误时，您就是对的。但是，这是系统限制而不是浏览器问题。
因此，JavaScript API 显示不正确的功能。
有关此内容的更多信息，请访问
• https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL