字符串PNG转换返回模糊图像

Question

我正在为 makecode arcade 制作一个网站here，我正在制作一个名为 ConvertAndDownload 的 PNG 函数字符串 但是当我下载图像时，一切都模糊了 例如 假设我有字符串

1 2 3 4 5  6 7 8 9 a  b c d e f  1 3 7 a f

它返回这个，但对我来说它假设是像素化的并且不是全部混合在一起（图像是 5x4 像素） （不知道如何调整图像大小，这就是你得到的）

我尝试添加

ctx.imageSmoothingEnabled = false;

但没用，

这是下载图片功能

function convertAndDownload() {
    var makeCodeString = document.getElementById('makeCodeInput').value;
    var canvasData = convertImgStringToCanvas(makeCodeString, colors)
    var canvas = canvasData;
    var ctx = canvas.getContext('2d');   
    
    
    var dataURL = canvas.toDataURL('image/png');
    var downloadLink = document.createElement('a');
    downloadLink.href = dataURL;
    downloadLink.download = document.getElementById('varName').value + '.png';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
}

Answer 1

为了防止下载的图像模糊，您需要确保画布尺寸与图像尺寸匹配。此外，您可以禁用图像平滑以防止任何可能导致模糊的插值。以下是修改 ConvertAndDownload 函数的方法：

function convertAndDownload() {
    var makeCodeString = document.getElementById('makeCodeInput').value;
    var canvasData = convertImgStringToCanvas(makeCodeString, colors);
    var canvas = canvasData.canvas;
    var ctx = canvas.getContext('2d');

    // Set canvas size to match image size
    canvas.width = canvasData.width;
    canvas.height = canvasData.height;

    // Disable image smoothing
    ctx.imageSmoothingEnabled = false;
    ctx.webkitImageSmoothingEnabled = false;
    ctx.mozImageSmoothingEnabled = false;
    ctx.msImageSmoothingEnabled = false;

    var dataURL = canvas.toDataURL('image/png');
    var downloadLink = document.createElement('a');
    downloadLink.href = dataURL;
    downloadLink.download = document.getElementById('varName').value + '.png';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
}