Масштаб изображения перед тем toDataURL - html2canvas

Question

Перед тем, как сказать мне это дубликат вопрос, знаю, что я искал через каждый одиночный подобный вопрос и ни ответов ни в одном из них работают для меня.

Im используя html2canvas, чтобы захватить снимок DIV, и то, что мне нужно сделать, это масштабировать его до 750x1050 перед сохранением его в формате PNG с помощью canvas.toDataURL().

Ближайший я получил со следующим кодом.

html2canvas(document.getElementById('div_id'), { 
    onrendered: function(canvas) { 

     var extra_canvas = document.createElement("canvas"); 

     extra_canvas.setAttribute('width', 750); 
     extra_canvas.setAttribute('height', 1050); 

     var ctx = extra_canvas.getContext('2d'); 
     ctx.drawImage(canvas, 0, 0, 750, 1050); 
     var dataURL = extra_canvas.toDataURL(); 

     window.open(dataURL); 
    } 
}); 

Изображение было размера правильно, но текст в изображении был крайне низкого качества, как если бы он изменен его после становится PNG.

Является ли это тем, что я делаю что-то неправильно или вы можете просто не масштабироваться таким образом?

Любое предложение/обход будет оценен по достоинству!

Answer 1

Для всех еще интересно, как получить высококачественный контент с высоким разрешением из html: PhantomJS и wkhtmltopdf/wkhtmltoimage являются отличные альтернативы, которые лучше справляются с этим.

Answer 2

У меня была немного похожая проблема, и это то, что я в конечном итоге делает

html2canvas($('#div_id'), {width: 750, height: 1050}).then(
    function(canvas) { 
     window.open(canvas.toDataURL("image/png")); 
    } 
) 

Теперь это все еще приводит к нечеткости изображения (особенно с текстом), но это потому, что мой масштаб по умолчанию в браузере был установлен на 110 % тех, которые заставляют window.devicePixelRatio быть 1.1000 ... Я отсортировал это, просто показывая предупреждение для пользователя (работая для этой цели, в котором оно мне нужно), но, видимо, есть лучший способ его решить. https://stackoverflow.com/a/22819006/460586

Answer 3

Даже мои изображения шли пикселизированными, а иногда и тесными, когда было много контента, чтобы соответствовать заданной ширине и высоте. После нескольких часов поиска найдено хорошее решение из этого post. Он заботится о поддержании разрешения в значительной степени даже при масштабировании и отсутствии видимой пикселизации.

html2canvas(document.getElementById('div_id'), { 
onrendered: function(canvas) { 
     var ctx = canvas.getContext('2d'); 
     ctx.webkitImageSmoothingEnabled = false; 
     ctx.mozImageSmoothingEnabled = false; 
     ctx.imageSmoothingEnabled = false; 
     var myImage = canvas.toDataURL("image/jpeg,1.0"); 
     } 
});