string PNG conversion Returns Blurry Image

Question

I'm making a website for makecode arcade here and I'm making a string to PNG function called ConvertAndDownload but when I download the image, its all blurry for example lets say that i have the string img1 2 3 4 5 6 7 8 9 a b c d e f 1 3 7 a f it returns this but its suppose to me pixelated and not all blended together (image is 5x4 pixels) Converted Image (idk how to resize the image so this is what you get sry)

i tried to add ctx.imageSmoothingEnabled = false; but that didnt work,

heres the download image function

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

To prevent the blurriness in your downloaded image, you need to ensure that your canvas size matches the size of your image. Additionally, you can disable image smoothing to prevent any interpolation that might cause blurriness. Here's how you can modify your convertAndDownload function:

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);
}

Answer 2

It is simplified, but can be a good starter towards your image pixel scaling feature which you probably tried implement on your website. I tested it o your latest code availalbe under provided link.

convertImgStringToCanvas = (imgString) => {
imgString = imgString.replace('`', '').replace('img', '');
  const rows = imgString.trim().split(/\s{2,}/).map(row => row.trim());
  const width = rows[0].split(' ').length;
  const height = rows.length;

  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // Set canvas size based on desired square size (could be adjusted to not use 1 to 1 ratio)
  const squareSize = 1;
  canvas.width = width * squareSize;
  canvas.height = height * squareSize;

  for (let y = 0; y < height; y++) {
    const rowData = rows[y].split(' ');
    for (let x = 0; x < width; x++) {
      const data = rowData[x];
      if (data !== '.') {
        const colorIndex = parseInt(data, 16) - 1;
        const color = colors[colorIndex];
        ctx.fillStyle = color;
        ctx.fillRect(x * squareSize, y * squareSize, squareSize, squareSize);
      } else {
        ctx.fillStyle = '#FFFFFF';
        ctx.fillRect(x * squareSize, y * squareSize, squareSize, squareSize);
      }
    }
  }
    return canvas;
}