返回

PNG 转换模糊？禁用图像平滑轻松解决！

javascript

图像转换难题：PNG 转换后为何模糊？

简介

将文本字符串转换为 PNG 图像是开发过程中经常遇到的问题。然而，转换后的图像经常出现模糊的情况，而非预期中的像素化效果。本文将深入探讨这一问题的根源并提供切实可行的解决方案。

模糊之谜

在将图像转换为 PNG 格式时，浏览器会默认启用图像平滑。这一技术用于对图像进行抗锯齿处理，使其显示时更加平滑。然而，对于像素化的图像，如转换后的 Makecode Arcade 字符串，图像平滑会导致图像变得模糊，失去了清晰的像素块。

解决之道

要解决这一问题，关键在于在将图像转换为 PNG 格式之前禁用图像平滑。通过以下代码即可实现：

ctx.imageSmoothingEnabled = false;

将其添加到 convertImgStringToCanvas 函数中，如下所示：

function convertImgStringToCanvas(makeCodeString, colors) {
    var canvasData = convertMakeCodeStringToCanvas(makeCodeString, colors);
    var canvas = canvasData.canvas;
    var ctx = canvas.getContext('2d');

    // Disable image smoothing
    ctx.imageSmoothingEnabled = false;

    return canvas;
}

禁用图像平滑后，转换后的 PNG 图像将保持其像素化的外观。

小试身手

使用以下代码示例，您可以亲身体验禁用图像平滑带来的差异：

<!DOCTYPE html>
<html>
<body>
    <canvas id="canvas1"></canvas>
    <canvas id="canvas2"></canvas>

    <script>
        var makeCodeString = '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000