Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – string PNG conversion Returns Blurry Image

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 5×4 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);
}
Tags:

2

Answers


  1. 0

    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);
}
    Login or Signup to reply.
  2. 0

    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. enter image description here

    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;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search