html5 canvas drawImage масштабирование делает результат размытым - PullRequest
Новая
       24

html5 canvas drawImage масштабирование делает результат размытым

0 голосов
/ 03 мая 2018

Здесь было задано несколько вопросов, связанных с моим, но я все еще борюсь.

Я использую html2canvas для создания холста определенных частей моего веб-приложения. Здесь у меня первый вопрос: документация дает ряд опций (ширина, высота, масштаб), которые создают впечатление, что они предназначены для манипулирования размером результирующего изображения. Я хотел бы уменьшить размер результата по сравнению с оригинальным div. Однако, что бы я ни делал, я не понимаю. Если я установлю ширину / высоту меньше, чем оригинальный div, он просто берет только часть div (он в основном обрезается). И масштаб, похоже, влияет на соотношение между шириной / высотой холста и шириной / высотой стиля CSS. На самом деле он не уменьшает содержимое оригинального размера на меньший холст.

Что ж, я мог бы с этим смириться и перейти к полученному холсту того же размера, что и оригинальный div, поскольку существует еще один хороший вариант для масштабирования изображений на стороне клиента. Я пытаюсь перерисовать холст на меньшем, используя drawImage с соответствующими context.width, context.height и context.scale.It работает, но что бы я ни пытался, конечный результат довольно размыт. Обратите внимание, что я DOWNscaling (даже не UPscaling) простых изображений, а не изображений в высоком разрешении. Скриншот результата: Сверху оригинальный div, чуть ниже немасштабированного результата после html2canvas, а справа уменьшенный после: 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 на меньшем холсте. Это только урожай. Любая помощь будет принята с благодарностью! Mark

...