Страницы

Поиск по вопросам

понедельник, 8 июля 2019 г.

Теряется качество изображения при сохранении с помощью html2canvas

Всем привет. подскажите пожалуйста, где моя ошибка. Задача состоит в том, чтобы сохранить блок в виде изображения. Делаю это следующим образом:
html2canvas($('.gameTable'),{ onrendered: function (canvas) { $('#download').attr('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream")); $('#download').attr('download', prefix+'_'+type+'_'+size+'.png'); $('#download')[0].click(); } });
Пробовал и так:
html2canvas($('.gameTable'), { onrendered: function (canvas) { var newCanvas = document.createElement("canvas"); newCanvas.setAttribute('width',1000); newCanvas.setAttribute('height',1000); var ctx = newCanvas.getContext('2d'); ctx.drawImage(canvas,0,0,canvas.width, canvas.height,0,0,1000,1000); var dataURL = newCanvas.toDataURL(); var img = $(document.createElement('img')); img.attr('src', dataURL); $('#download').attr('href', newCanvas.toDataURL("image/png")); $('#download').attr('download', prefix+'_'+type+'_'+size+'.png'); $('#download')[0].click(); } });
В результате получаю изображение плохого качества, во всяком случае, заказчик недоволен. Вот сохраненный скриптов вариант:
Вот сохраненный с помощью Lightshot:
Хотя я сейчас смотрю на прикрепленные изображения и особых различий не вижу, скажите, может есть в моих действиях какая-то ошибка. Всем заранее благодарен.


Ответ

соглано MDN метод канваса toDataURL имеет второй параметр качество:
canvas.toDataURL(type, encoderOptions);
encoderOptions - Число от 0 до 1, указывающее качество изображения.
Так же у этого параметра
Значение по умолчанию - 0,92.
можно, например, поставить canvas.toDataURL("image/jpeg",1)

Комментариев нет:

Отправить комментарий