try to use canvas filter

[JingBh]

有同学反馈，在一些背景图下，白色文字看不清，黑色文字又不好看，建议我加一个文字阴影功能。

这个办法很聪明（我怎么没想到），效果很好，于是我尝试在前端实现，也就是使用 drop-shadow。

可惜 ctx.filter 这个属性，不仅 Safari 不支持（去年就因为这个出了问题），微信小程序也是完全不支持。

我又尝试了去年 @Alan-Liang 在 JingBh/zgk-avatar#1 提出的方法，发现在微信小程序中依然不可用，具体表现为要画到 canvas 上的 Image 元素无法加载，并且 onerror 似乎没有给出错误信息。

最后，我只能在后端实现，把这个功能集成到自定义文字功能里。但是若在前端实现，还是会灵活很多。

想请问 @Alan-Liang 大佬是否知道其他实现方法？

[Alan-Liang]

走 ctx.filter 看上去是无解的，我这边是直接检测到 !('filter' in canvas.getContext('2d')) 就隐藏对应的 UI，但是似乎可以用 ctx.shadowX 系列的 API 来做阴影，web 里是可以的，小程序的文档声称它可以，手头没有调试环境，不知道实际上支不支持。

demo: https://codepen.io/alan-liang-x/pen/zYRPJJx

[JingBh]

@Alan-Liang 非常感谢！测试了一下好像可以用。我甚至不知道有这个 API（

[JingBh]

但是其它的 filter，比如 blur 还是无解的对吧

[Alan-Liang]

~~也许可以试试用 imageData 手算高斯模糊~~

[JingBh]

好像有个新的问题——微信小程序支持 shadowBlur，但是不管值是多少似乎效果都一样，太浅了，如图：

开发者工具中模拟器，shadowBlur = 10	真机，shadowBlur = 10	真机，shadowBlur = 50