Межбраузерные различия в CanvasRenderingContext2D.drawImage ⇐ Javascript

[Anonymous]

Похоже, что в CanvasRenderingContext2D.drawImage существуют различия между браузерами. В следующем примере я заметил, что Firefox (Mac 146) и Brave (Mac 1.85.118) не только меняют цвета, если вы вводите URL-адрес данных для изображения, но делают это по-разному. Firefox сохранит то же количество цветов, но внесет в них небольшие изменения. Brave добавит новые цвета, которые очень похожи на существующие цвета, например, если исходный цвет #A06068, в конечном изображении я также получу цвета #A06069 и #A16068.
Я проверил это, поместив URL-адрес полученных данных в панель браузера, скопировав его в GIMP, обрезав ненужные области и переключившись в индексированный режим.
Да есть ли способ сохранить исходные цвета во всех браузерах? Или хотя бы обеспечить единообразие процесса во всех браузерах?

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

Log

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

const sillyLog = (sourceUrlString) => {
const img = new Image();
try { const sourceUrl = new URL(sourceUrlString); console.log(`using ${sourceUrl.protocol} source URL`, sourceUrlString); }
catch { console.log(`using source URL`, sourceUrlString) }

img.onload = () => {
const canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext("2d").drawImage(img, 0, 0)

const resultUrlString = canvas.toDataURL("image/png");
const resultUrl = new URL(resultUrlString)
console.log(`got ${resultUrl.protocol} result URL`, resultUrlString);
}
img.src = sourceUrlString;
}

window.onload = () => {
document.getElementById('button').onclick = () => {
const textarea = document.getElementById('textarea');
sillyLog(textarea.value);
}
}

JSFiddle: https://jsfiddle.net/codergal6502/ky5qrfcu/
Для справки: я сгенерировал URL-адрес исходных данных, введя в https://ezgif.com/image-to-datauri.

Подробнее здесь: https://stackoverflow.com/questions/798 ... -drawimage