Всем привет. подскажите пожалуйста, где моя ошибка. Задача состоит в том, чтобы сохранить блок в виде изображения. Делаю это следующим образом:
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)
Комментариев нет:
Отправить комментарий