0

I have a png image, or in a blob. This image has a particular size, lets say 800px*600px when I resize it using some canvas methods like this one: Resize image, need a good library it losses quality.

I want to resize my image to something like 4000px and not bluring the content. Is there a way to do it? Inside my image there is only text.

I am using Angular CLI: 1.7.3 Node: 8.9.0 Angular: 4.4.6 Typescript: 2.3.4

Jorge Monroy
  • 408
  • 1
  • 5
  • 16
  • 4
    JS cannot break the laws of physics and math, so no. You might be able to double the size without noticeable quality loss, but you can't make it 5X bigger on a side. You are asking to go from under 1 megapixel to 16, which simply can't happen w/o appreciable degradation. – dandavis Sep 17 '19 at 17:06
  • There may come a day when AI can figure out what most likely goes between pixels, but that day is not quite here yet, and even when it is, it almost certainly would be limited to Photoshop-level image manipulation programs and not JS canvases. – IceMetalPunk Sep 17 '19 at 17:12
  • Use a vector based image (e.g. svg) instead of a pixel based one. – nll_ptr Sep 17 '19 at 17:13

1 Answers1

0

What's probably happening is that there is some automatic aliasing being applied when you resize the canvas. Using this other question for reference, it seems that you might need to specify the interpolation mode to nearest-neighbor:

canvas {
  image-rendering: optimizeSpeed;             // Older versions of FF
  image-rendering: -moz-crisp-edges;          // FF 6.0+
  image-rendering: -webkit-optimize-contrast; // Webkit (non standard naming)
  image-rendering: -o-crisp-edges;            // OS X & Windows Opera (12.02+)
  image-rendering: crisp-edges;               // Possible future browsers.
  -ms-interpolation-mode: nearest-neighbor;   // IE (non standard naming)
}

(code snippet fetched from referenced question)

Christian G.
  • 1
  • 2
  • this would just make text blocky (pixelated) instead of fuzzy though, right? – dandavis Sep 17 '19 at 17:34
  • @dandavis Yes, I was making the assumption he was probably working with pixel graphics, where you want the visuals to purposefully be blocky. The main comments have already explained why it would otherwise be impossible to get the same quality when blowing up an image like that unless its vector based. – Christian G. Sep 17 '19 at 17:57