如何在從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轉換時提高圖像的分辨率

回答

相關問題