遇到的问题，绘制海报，使用本地图片，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两条，但是没写图片已加载事件判断，导致只有第一次能生成海报，后面无反应不报错
鉴于我知识点都是百度查看，所以文章只是参考功能，能给遇上问题的人带来点突发奇想，以此解决问题就行，至于文中的盲点，如果有道友知道，可以评论讲解，感谢！
网友评论