Комплект Качество Png с html2canvas

Question

 html2canvas($("#Element"), { 
    onrendered: function(canvasq) { 
    var w=window.open(); 
    w.document.write("<h3 style='text-align:center;'>"+ReportTitle+"</h3>"); 
    w.document.write("<img width='100%' height:'90%' src='"+canvasq.toDataURL()+"' />"); 
    w.print(); 
    } 
}); 

Я хочу увеличить качество canvasq.toDataURL(). Есть ли какой-нибудь метод? Потому что возвращенные данные низкое качество.

Answer 1

Короткий ответ:
Установите размер изображения до 1/3 его первоначального размера.

Длинный ответ:
качества печати изображений на вашем сайте, 72dpi.

Когда вы пытаетесь распечатать свою страницу, все тексты отображаются как векторы высокого качества (обычно ~ 300 точек на дюйм, в зависимости от настроек печати).

Так что если вам нужно распечатать высококачественное изображение, вам нужно будет уменьшить его, по крайней мере, до трети его первоначального размера.

Когда вы используете библиотеку html2canvas для создания изображения, перед выполнением рендеринга вам нужно будет установить все размеры CSS до 300%.

Так считают это:

var ReportTitle = 'Hello world!'; // For demonstration 

var bigCanvas = $("<div>").appendTo('body'); // This will be the 3x sized canvas we're going to render 
var scaledElement = $("#Element").clone() 
.css({ 
    'transform': 'scale(3,3)', 
    'transform-origin': '0 0' 
}) 
.appendTo(bigCanvas); 

var oldWidth = scaledElement.width(); 
var oldHeight = scaledElement.height(); 

var newWidth = oldWidth * 3; 
var newHeight = oldHeight * 3; 

bigCanvas.css({ 
    'width': newWidth, 
    'height': newHeight 
}) 

html2canvas(bigCanvas, { 
    onrendered: function(canvasq) { 
    var w=window.open(); 
    w.document.write("<h3 style='text-align:center;'>"+ReportTitle+"</h3>"); 
    w.document.write("<img width='"+oldWidth+"' height='"+oldHeight+"' src='"+canvasq.toDataURL()+"' />"); 
    w.print(); 
    bigCanvas.remove() 
    } 
}); 

Working JSBin link

Answer 2

подход с CSS масштаба является правильным.

Сначала нам нужно увеличить элемент, , а затем в обратном вызове «html2canvas» масштабировать его.

var ELEMENT = jQuery("#ELEMENT"); 

//get element width and height 
var w = ELEMENT.width(); 
var h = ELEMENT.height(); 

//scale up your element 
ELEMENT.css({ 
'transform': 'scale(3)', 
'-ms-transform': 'scale(3)', 
'-webkit-transform': 'scale(3)' }); 

//run html2canvas 
html2canvas(ELEMENT, { 
onrendered: function(canvas) { 

//scale back your element 
ELEMENT.css({ 
'transform': '', 
'-ms-transform': '', 
'-webkit-transform': '' }); 

//your actions to canvas 
var win = window.open(); 
win.document.write('<h3 style="text-align:center;">ttl</h3>'); 
win.document.write('<img width="100%" height:"90%" src="'+canvas.toDataURL()+'"/>'); 
win.print(); 


}, 
//set proper canvas width and height 
width: w*3, 
height: h*3 
});