給定一個畫布對象，我如何獲得它的按比例縮小的“版本”作為圖像/ Base64編碼的字節數組？

Question

我正在使用html2canvas來獲取當前瀏覽器窗口的“屏幕截圖”。 我想將屏幕截圖保存為Base64編碼的數據，以后可用於創建html img。 例如，我可能想將canvas.toDataURL（）返回的String保存在瀏覽器的本地存儲中，並在以后檢索它。

以下代碼可以正常工作：

html2canvas(document.body, {
    onrendered: function(canvas) {
        localStorage.setItem('screenshot', JSON.stringify(canvas.toDataURL()));
    }
});

我以后可以檢索它並從中創建圖像，例如使用Angular：

<img data-ng-src="{{imgData}}"/>

不過，我要做的是按比例縮小屏幕截圖。 我可以簡單地使用CSS縮放結果圖像，但是我想節省存儲空間。 換句話說，我希望String編碼表示例如200像素寬而不是（例如）1000像素寬的圖像。 我不在乎圖像的質量。

這是我最近來的：

saveScreenshot = function(name, scaleFactor) {
    html2canvas(document.body, {
        onrendered: function(canvas) {
            var ctx = canvas.getContext('2d');
            var img = new Image();
            img.onload = function() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.scale(scaleFactor, scaleFactor);
                ctx.drawImage(img, 0, 0);
                //canvas.width *= scaleFactor;
                //canvas.height *= scaleFactor;
                localStorage.setItem('screenshot', JSON.stringify(canvas.toDataURL()));
            }
            img.src = canvas.toDataURL();
        }
    });
}

這幾乎可以正常工作-“圖片”的縮放比例正確，但是生成的圖像仍與原始尺寸相同，其余空間顯然用透明像素填充。

如果我取消注釋設置畫布的高度和寬度的兩行，則圖像是正確的尺寸，但全部為空白。

我感覺自己接近了-我想念什么？

Answer 1

.toDataURL將始終捕獲整個畫布，因此要獲得較小的圖像，必須創建第二個較小的畫布：

var scaledCanvas=document.createElement('canvas');
var scaledContext=scaledCanvas.getContext('2d');
scaledCanvas.width=canvas.width*scaleFactor;
scaledCanvas.height=canvas.height*scaleFactor;

然后縮放第二個畫布並將主畫布繪制到第二個畫布上

scaledContext.scale(scaleFactor,scaleFactor);
scaledContext.drawImage(canvas,0,0);

最后將第二個畫布導出為dataURL。

var dataURL = scaledCanvas.toDataURL();

警告：上面未經​​測試的代碼...但是它應該使您走上正確的軌道！