CODEWITHSUNDEEP
imagezoomingresolutionkineticjsblurry
Richard Lailey
Richard Lailey

Reputation: 61

KineticJS image resize is blurry

If I have a high res image and use kinetic.image width and height attributes to scale it down I find that when I zoom in by using stage.setScale() the image is blurry compared to the original.

What are my options for zooming into an image on the stage so that it maintains its original crispness yet displays on the default 1:1 stage scale as smaller than the original resolution?

Upvotes: 0

Views: 980

Answers (1)

ikhsan
ikhsan

Reputation: 373

I have the same problem with it actually, but try to add css style to the canvas to override default behavior on how browser render the scaled image, it is not specific to kineticJS

canvas {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

and this may be helpful too Disable Interpolation when Scaling a <canvas> and here is the fiddle borrowed from above link http://jsfiddle.net/VAXrL/21/

please also refer to this question Resizing an image in an HTML5 canvas

Upvotes: 2

Related Questions