保存爲圖像後保留元素大小

我有問題，使用html2canvas和canvas2image。我使用此代碼：保存爲圖像後保留元素大小

$('#preview').click(function() { 

var scaleBy = 5; 
var w = 1000; 
var h = 1000; 
var div = document.querySelector('#screenshot'); 
var canvas = document.createElement('canvas'); 
canvas.width = w * scaleBy; 
canvas.height = h * scaleBy; 
canvas.style.width = w + 'px'; 
canvas.style.height = h + 'px'; 
var context = canvas.getContext('2d'); 
context.scale(scaleBy, scaleBy); 

html2canvas(div, { 
    canvas:canvas, 
    onrendered: function (canvas) { 
     theCanvas = canvas; 
     var dataString = canvas.toDataURL("image/png"); 
     var link = document.createElement("a"); 
     link.download = 'image'; 
     link.href = dataString; 
     link.click(); 
    } 
}); 
});

#preview是用於保存圖像的按鈕ID，問題是，當我將圖像保存爲它png格式其獲得更多的空間。像這樣http://imgur.com/2EdlhX9。將圖像保存爲圖像後，如何將圖像的大小設置爲相同？謝謝..

來源

2017-03-02 Gilang Rizkie

您可以從解釋爲什麼將畫布尺寸設置爲5000x5000開始？ – Cauterite

我改變了它2000年，但它仍然沒有改變任何東西，爲什麼我使用規模是爲了使圖像unblurry @Cauterite –

Html2canvas嘗試基於爲捕獲的元素提供的高度&捕獲元素的屏幕截圖。

此外還有一個選項，可以在html2canvas中設置拍攝圖像的高度&寬度。你可以嘗試設置你的新高度和寬度嗎？下面是例子。例如：

html2canvas(div, { canvas:canvas, 
    onrendered: function (canvas) { 
    // ur code logic 
    } 
    }, 
    { width: newWidth, height: newHeight} 
);

希望這會有所幫助。

來源

2017-03-17 07:20:57 GokuSS3

我已經解決了這個問題，謝謝你回答我的問題;） –

保存爲圖像後保留元素大小

回答

相關問題