ueditor处理webp图片

        今天运营MM突然说，资讯管理功能用不了，从别的微信公号里复制过来的文章的图片显示不了。这个天下文章一大抄。。。

       

        好吧，开始干活。先重现下问题，登录，打开新增资讯页，里面有个富文本编辑器，用的百度ueditor。再打开运营MM给我的文章链接，复制图文到富文本编辑器里，果然图片都显示不了。换篇别的试试？随便找了篇新浪的新闻，c&p套餐操作下，咦，又能正常显示图文。

       

        奇了怪了，F12看看控制台。发现不能显示图片的时候报了cross origin错误。为啥新浪复制过来的图文没事？继续跟进，原来ueditor会自动下载富文本编辑器里的图片到本地（有个controller.jsp），从新浪复制过来的图文正常下载了图片，在富文本编辑器里显示的图片是本地链接，自然不会cross origin。而从微信号里复制过来的图文下载图片失败，ueditor就默认还是用原来的图片链接地址，于是报了cross origin错误。

 

        继续跟进，为啥下载不了呢？原来从微信号里复制过来的图片是image/webp类型的，而在ueditor的MIMEType.types里没有这种类型的图片，于是ueditor就说类型没匹配上，不干活了。

 

        不干活不行啊，研究下怎么加上这个类型，ueditor有个配置文件config.json，看了半天，好像没地方加。。。，看了下源码，几种匹配的图片类型是写在MIMEType.types这个静态map里的，还好是public的，于是再去下载图片之前，加上一句MIMEType.types.put("image/webp", ".jpeg");试试吧，哦耶图片可以显示了。

 

        于是喜滋滋的跟运营MM说，哥帮你搞定了，看看吧。MM们试了试，纷纷称赞腻害啊，哥。哈哈虚荣心得到满足。

 

        但是事情往往比想象的复杂，过了会，MM们又说，维护的资讯文章，在手机上显示不了。。。继续继续，Come on, bugs!

 

        仔细看了看，图片确实没显示，但是占位还是占了。来吧，把链接复制到电脑上打开，F12大法调教调教。奇怪的事情又来了，在电脑上又是正常的，换个手机看看，也是正常。。。

 

        为啥啊？一道亮光出现在脑海中——不能显示图片的是苹果手机。于是速度打开百度，关键字IOS webp，果然，苹果现在还不支持webp格式的图片。找到问题的原因了，怎么办呢？第一反应就想把图片格式转转呗，貌似so easy。

 

        百度大法走起，总共试了3种转换的方法，https://segmentfault.com/a/1190000016324137比较靠谱，终于搞定，打完收工