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插進去