canvas跨域问题

活动页须要合成一张海报，因此要用canvas，一开始我觉得只是简单合成，后来我发现我错了。

首先我没接触过canvas的任何应用。因此我先上网找了一下教程。。
好像教程都挺简单的

1 var canvas=document.getElementById("myCanvas");//获取cnavas那个dom
2 var ctx=canvas.getContext("2d");//貌似是定义为2D
3 var bg = document.getElementById("scream");//获取id为img的dom
4 ctx.drawImage(bg,0,0,750,1159);//把图片插入canvas的方法 

这样就能够搞到图片了 而后用drawImage()方法就能够了。
看完教程我以为，这些玩意Low爆了，简单的一逼~
可是我错了，错的很离谱。。

 

如今存在的两个问题
1.图片加载问题。
2.画图的层级问题。
　　第一个问题图片加载问题，我看到网上不少人用.onload()；并非说这个方法很差，我我的以为用complete会方便一点。（由于我这边要把多个图片合成一个海报，因此我就定义了一个开关判断这些图片是否都加载了才执行下一步）注：complete的判断依据是图片是否出现过，而后返回的是true or false这里的出现过与display:none之类的css是无关的。彻底是用来判断这个图片是否已经存在网页中，能保证图片彻底加载过，这样就不会使canvas画空了。

　　第二个问题 图片的层级问题，这个问题只要按顺序写就能够了，最后写的层级最高，因此第一个写的就是背景图了。就是辣么简单！

画完了canvas，就要转换成img图片了，是否是感受soeasy?合成图片的时候，就出现了跨域问题！！没错就是跨域了，这些图片都是一个页面上的，为何会跨域呢？由于他们的文件源不同，因此跨域了！

 

 

　　那不是很悲剧吗？个人图片有来自本地 （背景图）有来自七牛 有来自其余外链的，那可怎么办啊？做为一个有尊严的前端，怎么能够向后端屈服？咱们要自强不息。

这个是忘了是啥时候的截图了。

而后我找到了一个属性crossOrigin="anonymous"，听说这个能够解决跨域问题，而后我就加上了

<img id="scream" src="" crossOrigin="anonymous" alt="The Scream" width="220"><!-- 背景图-->

 

 

　　好像解决了跨域问题。而后我就高高兴兴的拿给产品看了，可是产品的手机竟然还跨域了！！（吐槽一波，测试机的肾5S都没问题，就他的手机出现了跨域问题。mdzz）Cross-origin image load denied by Cross-Origin Resource Sharing policy.（来自产品手机的报错）。这时候没办法，而后我又想了一下，若是所有转换成Base64会不会解决呢？

jset do IT，我就去找后端，让他铺模板的时候，把图片地址换成base64，然鹅其余手机依旧正常，产品的手机依旧有问题。

 

　　这时候我只能跪着去找后端了，把全部的图片都转换成同源了，后端dalao抚摸着个人头，轻轻的说了一句，“好的”。
最后今天的全部问题都解决了！对了 好像忘了说转换成图片用什么方法了。

$('#img').attr('src',canvas.toDataURL());//canvas.toDataURL()就是把图片转换成base64 而后用JQ的attr插进去