Canvas toDataURL без альфа-канала

Question

Я хотел бы изменить размер загруженных изображений в браузере. Я использую холст, чтобы нарисовать загруженное изображение на холст, а затем изменить его размер и использовать результат из метода toDataURL.

Упрощенный код (без загружаемых частей) выглядит примерно так:

var canvas = document.createElement('canvas'); 
var ctx = canvas.getContext('2d', { alpha: false}); 
// img src contains data url of uploaded image 
ctx.drawImage(img, 0, 0, imgWidth, imgHeight); 
var dataUrl = canvas.toDataURL('image/png'); 

Проблема заключается в том dataUrl содержит альфа-канал, хотя контекст был создан с альфа-значение ЛОЖЬ.

Возможно ли получить URL-адрес данных без альфа-канала?

Если нет, я рассмотрел использование одной из библиотек изображений Javascript, но большинство из них полагаются на холст.

Кроме того, я мог бы кодировать изображение, используя данные в холсте, но я предпочел бы не делать :)

Answer 1

alpha:false используется только в WebGL. Он игнорируется при создании 2d-контекста.

Но вы можете экспортировать холст в формате JPG, где устранен ненужный альфа:

// export a full-quality jpg dataUrl 

canvas.toDataURL("image/jpeg", 1.0);