Как загрузить изображение с холста без искажений при ограничении ширины и высоты загруженных изображений ⇐ Javascript

[Anonymous]

Есть изображение 400*200, я хочу загрузить изображение с 40*20 с холстом. высота до 20, и преобразовать холст в Png.
Однако загруженное изображение имеет очевидное искажение。 < /p>

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

const canvas = document.createElement('canvas');
canvas.width = 40;
canvas.height = 20;
ctx.imageSmoothingEnabled = true
ctx.imageSmoothingQuality = 'high'
ctx.drawImage(img, 0, 0, 400, 200, 0, 0, 40, 20);
const dataURL = canvas.toDataURL('image/png');
const a = document.createElement('a');
a.href = dataURL;
a.download = 'canvasImage.png';
a.click();

слева - это изображение происхождения, а справа загружается изображение:

codeSandbox link

Подробнее здесь: https://stackoverflow.com/questions/794 ... g-the-widt