Узел-гнезды, Шрай и Скиа-Канвы, приводящие к размытому изображению при переполнении ⇐ Javascript

[Anonymous]

Я пробую пакет NPM Canvas ("Node-Canvas"), чтобы нарисовать изображение внутри прямоугольника от node.js, но при снижении изображения становится Blinear/Blurry.
Я использую canvas@3.2.0 .
const iconPath = path.resolve(iconsBaseDirectory, icon.source);
const image = await loadImage(fs.readFileSync(iconPath));
for (const size of sizes) {
const canvas = createCanvas(size, size);
const ctx = canvas.getContext("2d");
ctx.imageSmoothingEnabled = true;
ctx.quality = "best";
if (icon.tile ?? true) {
const marginX = 3;
const marginY = 3;
const tileWidth = size - 2*marginX;
const tileHeight = size - 2*marginY;
ctx.fillStyle = icon.color ?? this.defaultColor;
ctx.fillRect(marginX, marginY, tileWidth, tileHeight);
const tileIconSize =
icon.size == "smaller" ? 0.6 :
icon.size == "extraSmaller" ? 0.4 : 0.8;
const tileIconWidth = tileWidth * tileIconSize;
const tileIconHeight = tileHeight * tileIconSize;
ctx.drawImage(image, marginX + tileWidth/2 - tileIconWidth/2, marginY + tileHeight/2 - tileIconHeight/2, tileIconWidth, tileIconHeight);
} else {
ctx.drawImage(image, 0, 0, size, size);
}
const buf = canvas.toBuffer("image/png");
for (const dest1 of icon.dest) {
const dest2 = path.resolve(outputDirectory, dest1.replace("{size}", size.toString()) + ".png");
const p = path.resolve(dest2, "..");
fs.mkdirSync(p, {
recursive: true,
});
fs.writeFileSync(dest2, buf);
}
}

Я пробовал другие альтернативы, такие как Sharp и Skia-canvas .


Подробнее здесь: https://stackoverflow.com/questions/797 ... downscaled