Canvas.toDataURL с webp не работает на iPad Chrome и Safari ⇐ IOS

[Anonymous]

Я пытаюсь манипулировать изображениями через JavaScript, используя Canvas.toDataURL('image/webp', 0.8);, но хотя он работает на Android и Windows, он не работает на IOS (iPad), который возвращает png вместо этого.
То же самое касается и Canvas.toBlob()
Я использую Safari 16.6 и Chrome 130.0 на iPad
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+''+dataUrl.substring(0,30)+'...'; // Logging the base64 string for reference
};
};

reader.readAsDataURL(file);
}
}

Код: Выделить всё

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

Код: Выделить всё

canvas: img:

Есть ли способ обойти это (мне нужно разместить холст превратил изображение обратно в в виде веб-страницы на любом типе устройства, включая устройства Apple)?

Подробнее здесь: https://stackoverflow.com/questions/791 ... and-safari