如何在不损失质量的情况下扩展图像？

Question

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

Answer 1

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)