canvas 在压缩图像尺寸的时候，如何克服图像因变小而导致锐化很严重的情况？
alwayshere · 2018-01-15 08:53:27 +08:00 · 3596 次点击这是一个创建于 2532 天前的主题，其中的信息可能已经有所发展或是发生改变。
看到 Smart Resize 这种基于 HTML5 批量裁剪缩放的工具时，也想自己做一个出来，但是，我在实际测试中，canvas 在将一个图像尺寸等比缩放得很小时，图像会变得非常锐利，有的时候甚至达到变形失真的程度，但是 Smart Resize （ https://www.smartresize.com/zh-cn ）则完全不存在这一点，几乎不会失真，大家可以试一下，一张图片，通过自己的 canvas 等比变小图片尺寸（如 50x50px 这种小尺寸）时，图片锐化很严重，但是 Smart Resize 则不会，这到底用了什么算法？
 |
1
Jealee 2018-01-15 09:11:13 +08:00
这个好像要用最近邻插值算法(nearest)或者双线性插值算法(Bilinear)效果会好一些。当初用 node-canvas 时输出相册遇到过类似问题。
|
 |
2
Toninie 2018-01-15 09:19:11 +08:00
如果靠 canvas 来压缩图片确实会出现这个问题，可以试试这个插件，代码比较简单，也可以参考下源码，大概就是通过 canvas 获取原图的位图二维数组，然后就可以通过自己的算法压缩，再重新加载到 canvas 上
https://github.com/sapics/scale.js |
 |
3
tees 2018-01-15 10:13:44 +08:00  2
|
Select Language