如何在从canvas.todataURL转换时提高图像的分辨率

使用HTML2CANVAS从DIV捕获图像，但图像质量非常差，而且图像质量差。捕获的图像分辨率是96 dpi，如何提高分辨率？如何在从canvas.todataURL转换时提高图像的分辨率

有什么办法可以获得高分辨率的高质量图像，请帮我解决。

我的代码：

<div style="border-style: solid; height: 15cm; width: 15cm; border-radius:25px; 
      position: relative; top: 1px;" id="DIV1"> 

var element = $("#DIV1"); 

html2canvas(element, { 
    useCORS: true, 
    onrendered: function (canvas) { 

     var dataURL = canvas.toDataURL("image/png"); 
     window.open(dataURL); 
     } 
    });

我将使用FileUploader的DIV1这是一个高分辨率图像上方的图像，但是当html2canvas捕捉图像时，图像pixalets和分辨率将是96DPI。如何将分辨率提高到300 dpi？

来源

2016-02-04 Anoop B.K

标准的Windows显示dpi是96 dpi，所以有意义的是，没有某种形式的放大的直接屏幕捕捉将导致具有类似dpi的图像。

在html2canvas GitHub repository上有一个功能请求记录了这种类型的功能，但它自2013年以来一直开放。一种解决方法是首先使用transform: scale(2, 2)来缩放元素，但这并不理想。

来源

2016-02-24 05:52:20

我已经使用这个功能，它只是按比例削减我的图像。 http://i.stack.imgur.com/0amrZ.png –

发布您遇到问题的HTML和CSS部分。 –

我不认为html2canvas支持CSS3转换。但你可以使用[这个答案]（http://stackoverflow.com/a/36858051/1009901）以html2canvas实现高分辨率。诀窍是提供自己的画布给html2canvas，并获得2d的上下文并在做html2canvas之前进行缩放。 – Yeti

如何在从canvas.todataURL转换时提高图像的分辨率

回答

相关问题