Question

这里有一些与我有关的问题，但我仍在苦苦挣扎。

我使用html2canvas制作我的webapp的某些部分的画布。在这里，我有第一个问题：documentation提供了许多选项（宽度，高度，比例），这些选项给人的印象是它们旨在操纵结果图像的大小。与原始div相比，我想减小结果的大小。但是，无论我做什么，我都无法得到它。如果我将宽度/高度设置为小于原始div，则它只占用div的一部分（它基本上是庄稼）。并且比例似乎适用于画布宽度/高度与画布css样式宽度/高度之间的比率。它实际上并没有将原始大小的内容缩小到较小的画布上。

好吧，我可以忍受这一点并继续使用与原始div相同大小的结果画布，因为在客户端存在另一个用于缩放图像的好选项。我尝试在较小的画布上重绘画布，使用带有正确的context.width，context.height和context.scale的drawImage。但是无论我尝试什么，结果都相当模糊。请注意，我是DOWNscaling（甚至不是UPscaling）简单图像，而不是高分辨率图片。结果截图： On top the original div, just below that the unscaled result after html2canvas and on the right the down-scaled after: ctx.drawImage(canvas, 0, 0, width, height);

我的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。它只会作物。任何帮助将不胜感激！标记

html5 canvas drawImage缩放使结果模糊

0 个答案: