在toDataURL之前缩放图像 - html2canvas

问题描述

在你告诉我这是一个重复的问题之前，请知道我已经通过每个单个类似问题进行搜索，而没有我使用 html2canvas 来抓取div的快照，我需要做的是将其缩放到 750x1050。 在通过 canvas.toDataURL（）。

保存到png之前。使用以下代码。

  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.ope n（dataURL）; 
} 
}）; 
  

图片尺寸合适，但图片中的文字质量极差，好像它调整了大小在之后成为png。

这是我做错了什么，或者你是不是可以通过这种方式扩展？

任何和每一个建议/变通方式都将不胜感激！

解决方案

其他任何人都想知道如何从html获取高分辨率打印内容：和是处理这些事情的好选择。

Before you tell me this is a duplicate question, know that I've searched through every single similar question and none of the answers in any of them are working for me.

Im using html2canvas to grab a snapshot of a div, and what I need to do is scale it up to 750x1050 before saving it to a png via canvas.toDataURL().

The closest I got was with the following code.

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);
   }
});

The image was sized properly but the text within the image was extremely poor quality, as if it resized it after becoming a png.

Is it that I'm doing something wrong or can you just not scale up this way?

Any and every suggestion/work-around will be greatly appreciated!

解决方案

For anyone else wondering how to get high-res print-worthy content from html: PhantomJS and wkhtmltopdf / wkhtmltoimage are great alternatives that handle these things better.

这篇关于在toDataURL之前缩放图像 - html2canvas的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！