javascript - 改变 Canvas 的大小使其模糊

Question

我正在单击更改图表大小，以便更好地全面查看 pdf 的 m 数据。但问题是，当我单击以调整 Canvas 元素的大小时，它会变得模糊不清。我正在执行 $('canvas').css("width","811");点击后它改变了大小但使 Canvas 中的图形变得模糊。我已经阅读了很多帖子，但没有找到特定的解决方案。有什么帮助吗？

这是我的 jsfiddle

Answer 1

使用 chart.js 和 html2pdf.js 使用选定的 DPI 将 Canvas 转换为 PDF

要更改 PDF Canvas 的输出分辨率，您需要设置 DIP

根据内存，一张 A4 的横向宽度约为 11 英寸以上，而您想要容纳 2000 像素，因此让总边距为 1 英寸以上，使图形的宽度为 10"。我们可以使用 CSS 单位大小点(每英寸 72 点)，因此 Canvas 尺寸应为 72pt * 10"= 720pt。按相同的比例缩放高度。

现在要获得 DPI，将 canvas.width 除以大小 2000/10 = 200。

但我假设您想要更高的价格。因此，让我们更准确地做到这一点。

const A4 = {  // looked this up with google
    width : 11.69,
    height : 8.27,
}
// using pts and inches (I dont like using CSS inches)
const points = 72; // points per inch
const graphWidth = 10; // in inches on the page.
const graphDPI = 300; // desired DPI
const aspect = 492/2000; // aspect of image

function generate_pdf(){
    var canvas = document.getElementById('blanks_graph');
    canvas.width = graphWidth * graphDPI;
    canvas.height = Math.floor(canvas.width * aspect);
    canvas.style.width = (graphWidth * points) + "pt";
    canvas.style.height = Math.floor(graphWidth * points * aspect)+"pt";
    // add left margin to center graph.
    // you should remove the button and maybe put a margin on the top of
    // the canvas
    canvas.style.marginLeft = Math.floor(((A4.width - graphWidth) / 2) * points) + "pt"
    // changing the size needs to redraw the canvas
    redrawGraph();
    // the graph is drawn via a timeout event so will not be ready untill
    // after this function is done. Also there is the animation to avoid
    // So easy way is to just create the PDF with a timeout
    setTimeout(function(){
        var element = document.getElementById('main_data_div');
        html2pdf(element, {
            margin:       0,
            filename:     'myfile.pdf',
            image:        { type: 'jpeg', quality: 0.98 },
            html2canvas:  { dpi: graphDPI, letterRendering: true },
            jsPDF:        { unit: 'in', format: 'a4', orientation: 'l' }
         });
        },
        3000 // 3 seconds to redraw and animate.
    );
}

function redrawGraph(){ // redraws the graph
                        // just wrap this function around the graph draw code