drawImage() 的锯齿问题

2017年9月5日

背景

遇到 Canvas 使用 drawImage() 绘制图形出现锯齿严重的问题。

drawImage()

drawImage() 方法在画布上绘制图像、画布或视频
drawImage() 方法也能够绘制图像时，增加或减少图像的尺寸。

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

原因

小尺寸的图片放大会模糊，是因为像素信息不足，但为何大图片缩小会有锯齿？

我的理解：
缩小图形，相当于主动丢失一些像素信息。那么如何选择要丢弃的信息呢？取决于各类压缩算法。若丢掉了“不该丢”的像素，就会影响到图片质量了。
而 canvas 没有提供特别好的位图插值算法。

措施

1. 对半缩小(step-down)

经测试，若依次对半缩小，会比一次性缩小到位要好得多。

弊端，不能随心所欲缩小到指定的长宽，而是只能是原图的倍数缩减。

2. imagesmoothingquality

目前好像只有 chrome 支持此属性

context.imageSmoothingQuality = "low|medium|high"

资源

1. https://stackoverflow.com/questions/28498014/canvas-drawimage-poor-quality
2. https://stackoverflow.com/questions/17861447/html5-canvas-drawimage-how-to-apply-antialiasing
3. https://devdocs.io/dom/canvasrenderingcontext2d/imagesmoothingquality