Javascript html5画布图像缩放使结果模糊

这里有人问了几个与我有关的问题，但我仍在努力

我使用html2canvas为我的webapp的某些部分制作画布。这里我有第一个问题：提供了许多选项（宽度、高度、比例），这些选项给人的印象是，它们旨在操纵生成图像的大小。与原始div相比，我想减小结果的大小。但是，无论我做什么，我都不明白。如果我将宽度/高度设置为小于原始div，那么它只会占用部分div（基本上是裁剪）。scale似乎对画布宽度/高度和画布css样式宽度/高度之间的比率起作用。它不会将内容从原始大小缩小到更小的画布上

好吧，我可以接受这一点，并继续使用与原始div相同大小的画布，因为在客户端存在另一个很好的图像缩放选项。 我尝试在较小的画布上重新绘制画布，使用具有适当context.width、context.height和context.scale的drawImage。它可以工作，但无论我如何尝试，最终结果都相当模糊。请注意，我正在缩小（甚至不是放大）简单图像，而不是高分辨率图像。结果的屏幕截图：

我的javascript：

function init() {
$('#testBtn').on('click', function(){proces();});
}

function proces() {
var testElem = document.getElementById("container");
var options = {
    //I could play here with width, height and scale

};

html2canvas(testElem, options).then(function(canvas) {
    canvas.id = "resultCanvas";
    document.body.appendChild(canvas);
    var width = canvas.width;
    var height = canvas.height;
    var scale = 0.5 / 1.25;
    console.log(width, height)

    //var scaledCanvas = document.getElementById("testScaledCanvas");
    var scaledCanvas = document.createElement("canvas");
    scaledCanvas.id = "testScaledCanvas";
    scaledCanvas.height = scale * height;
    scaledCanvas.width = scale * width;

    var ctx = scaledCanvas.getContext("2d");
    ctx.scale(scale, scale);
    ctx.webkitImageSmoothingEnabled = false;
    ctx.mozImageSmoothingEnabled = false;
    ctx.msImageSmoothingEnabled = false;
    ctx.imageSmoothingEnabled = false;


    //Draw the scaled canvas
    ctx.drawImage(canvas, 0, 0, width, height);

    document.body.appendChild(scaledCanvas);
});
}

总之，缩小画布的尺寸会导致图像模糊。我无法让html2canvas在更小的画布上正确地压缩一个div。它只种植庄稼。 任何帮助都将不胜感激！ 标记