遇到的问题,绘制海报,使用本地图片,ios端表现良好;使用静态资源站(跨域图),ios端点击生成海报无反应,报DOMEXCEPTION错误,
开始排查错误,发现在使用canvas.toDataURL('image/png');报错,但原因未明。经过百度数次,查看许多别人的笔记,找到几个关键点,
1.设置图片跨域属性:img.crossOrigin = 'Anonymous' ;
2.img.src在图片跨域属性之后赋值;
由于本人图片是进入页面就加载完成,起初,我只在img标签上加上了跨域属性,并没有在canvas绘制事件里做其他处理,导致,结果跟原先一样,报错,无反应
感觉到了恶意,好像不太聪明,丧;但是强迫症使我坚强,继续解决;
又看了几篇别人的文字,我在canvas绘制事件里,我又获取了该图的dom,重新给其加上跨域属性,就是上述的第一条,紧接着,重新赋值图片的src,我也没懂这其中的操作是怎么回事,明明进入页面src就有了,跨域属性也有了,但是这里如果不设置,或者两个只设置其中一个,都不行,具体会出现的不良反应,有兴趣自己试试,我这不截图了;而且经过多篇文章的熏陶,这个两个还是有前后顺序,先跨域属性,后src,这样设置之后,我以为成功了,但是借了同事ios,发现其中那种跨域的图是空白的,而海报上一些本地图是显示的,再次吐血;后面发现ios 存在img.onload完成后绘制的独特,其实我也不知道,安卓需不需要,但是之前知识的空白,没有让我做到这样,也在安卓上良好,所以,再次给加上,onload,在里面,绘制,不过这个地方,我还踩了坑,可能是我对这些事件不熟悉,写的方法有问题,
上图的写法,在ios中表现打印那句话,却没有进行下面的,其实我也没验证,第二执行了没,但是最后一句是没有的,因为海报没出现,生成没反应啊,吐血,没有任何报错,所以我把怀疑的目光投向了这个onload事件,最后又找了一个vue中img的onload写法,就是下面这张图
是的,一样的操作,不一样的用法,我却不知道为什么,只能麻木的去使用,经过测试可以用的,一万点暴击,书到用时方恨少?还是原地爆炸吧。
然后它带着我友好的体验了一下,iOS无毛病的展示了生成海报的操作,可是我那同事手残啊,竟然关闭海报,还多来了几次,再次发现了问题,只有第一次能生成,这又是哪里出了问题?????
第一次能成功,说明代码没毛病,既然是img加载完了能绘制导出图片,那第二次理论上也可以,看下打印结果是没走进onload,是情况还没到位,说明第二次走了其他的事件,首先想到的是,已加载跟失败,但我先试了失败,因为失败太多次了,想把成功留到最后,失败是没打印,那只能是用加载完成了,可我又不会写了,害怕,写了又像上面的onload,就是不执行canvas的,所以我又去百度,
就是那个if里的判断,用了来看图片是不是已经加载了,而且,我看到那个文章里,作者考虑了,除了ios外,其他的会再执行onload,所以,需要这个if里,返回return,用来结束,用了iOS试了,果然,它在第二生成,走进了这个事件,激动,经过多次测试,确实,iOS,能正常生成了,不会出现,无反应报错,无反应不报错,有反应跨域图空白,第一次能生成,后面无反应不报错,这些诸多情况.
问题总结(ios端的表现):
1.canvas事件不写跨域图的跨图属性,及重置src,或者顺序问题,出现无反应报错
2.canvas事件写了第一条,但没写onload,导致海报能生成跨域图空白,onload写法有问题无反应不报错
3.canvas事件写了第1,2两条,但是没写图片已加载事件判断,导致只有第一次能生成海报,后面无反应不报错
鉴于我知识点都是百度查看,所以文章只是参考功能,能给遇上问题的人带来点突发奇想,以此解决问题就行,至于文中的盲点,如果有道友知道,可以评论讲解,感谢!