Mail.ruПочтаМой МирОдноклассникиВКонтактеИгрыЗнакомстваНовостиКалендарьОблакоЗаметкиВсе проекты

JavaScript. Конвертация файла PNG в JPG

Аркадий Саакян Ученик (162), на голосовании 1 год назад
Файл получается от пользователя из тега input. Я хочу конвертировать данное изображение в формат .jpg и сохранить на него ссылку с скачиванием.

Когда я пытаюсь скачать итоговый файл, нажимая на ссылку, скачивается изображение с чёрным фоном.
 // тег  
var input = document.getElementById('input');
// тег ...
var output = document.getElementById('output');

input.addEventListener("change", function() {
img.src = URL.createObjectURL(input.files[0]);
var canvas = document.createElement('canvas');
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
// скопировать изображение на canvas
canvas.getContext('2d').drawImage(img, 0, 0);
}
// создать изображение формата .jpg сохранить на него ссылку
output.href = canvas.toDataURL('image/jpeg');
});
Голосование за лучший ответ
Liru Искусственный Интеллект (116303) 1 год назад
Сменить тип MIME - не значит сконвертировать формат изображения.
Аркадий СаакянУченик (162) 1 год назад
Хорошо, но что не так?
LiruИскусственный Интеллект (116303) 1 год назад
Все не так. Начиная с вашего понимания происходящего.
Код я за вас писать не буду совершенно точно, но, КМК без картинки на сервер отправки на сервер и конвертации ее там из PNG в JPEG каким-нибудь ImageMagick-ом не обойтись
Или ищите JS-конвертер же. А от переобразования MIME картинка не меняется - вы просто пытаетесь ее вывести не тем способом. Закономерно не выходит.
Лайт Ягами Искусственный Интеллект (309937) Liru, через canvas - можно конвертировать, это не возбраняется. Пример: https://jsfiddle.net/2hnxLbfr/ (из кода автора, пофиксил его баг)
Лайт Ягами Искусственный Интеллект (309937) 1 год назад
output.href = canvas.toDataURL('image/jpeg'); нужно делать после того, как картинка загрузилась и отрисовалась, иначе будет пусто. Внутри функции onload делай это.
Вот так работать будет: https://jsfiddle.net/2hnxLbfr/ (из агрессивных стран открывать через VPN)
Похожие вопросы