[{"data":1,"prerenderedAt":66},["ShallowReactive",2],{"/2025/09/23-bad-image-quality-on-scaled-down-image":3},{"id":4,"title":5,"body":6,"date":57,"description":54,"extension":58,"meta":59,"navigation":60,"path":61,"robots":62,"seo":63,"stem":64,"__hash__":65},"posts/2025/09/23 bad-image-quality-on-scaled-down-image.md","23 Bad Image Quality On Scaled Down Image",{"type":7,"value":8,"toc":53},"minimark",[9,18,25,28,36,39,42,50],[10,11,13],"post-title",{":date":12},"date",[14,15,17],"h1",{"id":16},"bad-image-quality-on-scaled-down-image","Bad Image Quality on Scaled Down Image",[19,20,21],"notes",{},[22,23,24],"p",{},"This is a repost from my old blog. First posted in 1/18/2017.",[26,27],"br",{},[22,29,30,31,35],{},"The image in ",[32,33,34],"code",{},"\u003Ccanvas>"," appears to be bad quality when we scale it down. Apparently it is due to linear interpolation algorithm used by the browser because it is fast.",[22,37,38],{},"I also learn that scaling down requires resampling while scaling up requires interpolation.",[22,40,41],{},"Searching online, I found pixel perfect resampling algorithm.",[22,43,44],{},[45,46,47],"a",{"href":47,"rel":48},"http://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality",[49],"nofollow",[22,51,52],{},"I thus ran the image over the algorithm before having the canvas redraw it. It is a good stuff and improve the quality of the image.",{"title":54,"searchDepth":55,"depth":55,"links":56},"",2,[],"2025-09-23T00:00:00.000Z","md",{},true,"/2025/09/23-bad-image-quality-on-scaled-down-image",null,{"title":5,"description":54},"2025/09/23 bad-image-quality-on-scaled-down-image","iOclNlQJNmaZz7B2vBILbGnDYOaoTNpOE-nV7Ti9aqo",1785167453083]