drawImage()方法繪製圖片不顯示的問題
canvas有個很強大的api是drawImage()(w3c):
他的主要功能就是繪製圖片、視訊,甚至其他畫布等。
問題:
慕名趕來,卻一腳踩空,低頭一看,地上一個大坑。
事情是這樣的,在我看完w3c的介紹和很有說服力和教學力的demo後,本著實踐出真知的思想決定上手一試,這一試不要緊~
我按照流水線工程鋪設以下幾點基本工作:
1. canvas標籤+id
<canvas id="canvas1"></canvas>
2. 獲取canvas+設定寬高
var cav1 = document.getElementById('canvas1'), wWidth = 800, wHeight = 600; cav1.width = wWidth; cav1.height = wHeight;
3. getContext('2d')準備畫布
var ctx1 = cav1.getContext('2d');
4. new一個Image()物件,並付給他我喜歡...的圖片(別想多了)的屬性
var bgImg = new Image(); bgImg.src = 'images/background.jpg';
5. 終於到了繪圖。興沖沖的寫下這段程式碼:
ctx1.drawImage(bgImg,0,0,wWidth,wHeight);
流著哈喇子,我在瀏覽器按下了F5。
然後一片死寂...
以為程式碼寫錯了,再回去仔細檢查一遍,沒錯啊。
複製w3c的關鍵屬性名及方法再檢查一遍,確實沒錯啊。
圖片打印出來,也有這個(人)圖啊!
後來觀察w3c的案例,和我程式碼的區別就是他的圖片是在html裡邊的。
然後我就學著向html裡邊插入了圖片,
<img src="./images/background.jpg" id="imgs" style="display:none"></img>
並且用getElementById獲取這個元素,
var bgImg = document.getElementById('imgs')
再次執行繪圖竟然可以了。
他竟然可以了!
難過的想,就必須要實體嗎?不就是放到了canvas標籤前邊嘛!js載入也有實體啊,而且我還是用new的啊,比真人差哪了!
對啊,不就是放到前邊了嘛。這就涉及到一個順序問題啊!
js里加載的圖片是放在繪圖前邊沒錯,但是圖片載入進來還需要個時間啊。需要給圖片緩衝的時間。
等圖片載入成功後才可以進行繪製。
而drawImage這個方法,當圖片在沒載入完的情況下使用,他會不被呼叫。繪製就會失敗。
原來如此!
就有人擡槓說img標籤裡的圖片不需要時間載入嗎?這時候drawImage就不受限制了?!
但是你不要忽略了,js開頭的 window.onload 的啊,就算圖片載入再慢,就算圖片標籤的順序在canvas標籤的後邊,但是我有window.onload罩著,我圖片載入不完,你drawImage就沒戲啊對不對。
大概順序是這樣的:
<img src=""> window.onload = function(){ drawImage }
如果不是在html結構中插入的圖片,就被我的粗心繞過了這個限制:
圖片作為一個資源請求,在js中載入時,自然也會有一個圖片載入的時間。
但是因為沒有限制,極大的情況是當圖片還沒有載入完畢就呼叫了drawImage,此方法他是不起作用的。
解決:
那有沒有好的方法解決因圖片載入順序導致drawImage繪圖失敗的情況呢?
我總結了以下三種方法:
1. 標籤+window.onload
<img src=""> window.onload = function(){ context.drawImage() }
這種做法解決的核心是onload,將圖片和drawImage分開載入,img先載入,確保載入完畢以後再使用繪圖
1-2. 後期插入標籤?是否可行
有一種情況是,使用截圖功能時,也可以用drawImage,而截圖又不不是截自己既有的圖片,而是用一個圖片的地址當引數.
我想這種的就需要js來建立一個img,並將地址賦給它.然後生成圖片再來截圖了
var myImg = document.createElement('img'); myImg.src = '///'; document.body.appendChild(myImg); ctx1.drawImage(myImg,0,0,wWidth,wHeight);
不想加多餘的標籤?必要像下邊這樣用js來new一個image物件?
var bgImg = new Image(); bgImg.src = 'images/background.jpg';
前邊說了,這種使用 new Image() 建立的圖片,需要給圖片緩衝的時間。等圖片載入成功後才可以進行繪製。
圖片物件是準備好了,但你怎麼知道圖片什麼時候真的載入完成呢?
好,還有辦法:
js任務執行中,你嫌我離你執行的時間太近是不,那把我單獨拎出來重新排隊,等會再執行可以否?(js單執行緒和非同步)
2. 定時器非同步實現
setTimeout(function(){ ctx1.drawImage(bgImg,0,0,wWidth,wHeight); },10)
這裡為什麼延遲寫了10,沒寫大家熟悉的1000或者0呢?
因為在我的特定wifi環境特定桌上型電腦電腦的測試下,10能在圖片載入完後剛好圖片出來,而不像0那樣不出來,也不想1000那樣等半天出來。
可是試想一下,換一個更大的圖,這個10還適用嗎?wifi換成2g這個10還適用嗎?
所以,定時器的缺點就是,不能保證時間到了以後圖片已經載入進來了,網不快的話照樣掛掉。
3. img.onload
window.onload給了我們思路,直接監聽他載入完成不可以了嘛
使用img的載入事件,監聽圖片載入成功後,再執行canvas的繪圖效果.並且這種方法靠譜一些。
1 bgImg.onload = function(){ 2 console.log('圖片載入成功'); 3 console.log(this); 4 ctx1.drawImage(bgImg,0,0,wWidth,wHeight); 5 }
其實這三種方法都是一個核心,就是讓圖片先載入。即圖片預載入。
但是對於快取圖片,圖片預載入還需要解決的是,當頁面不重新整理時監聽快取圖片的問題,這個問題另一篇博文。
又發現一個問題。。。。
首先,背景圖畫完的樣子長這樣。
然後好不容易背景圖畫出來了,我就開開心心的繼續吧。
於是我緊接著畫了一條紅線,為了避免看不到,我還把寬度增加到了20:
bgImg.onload = function(){ ctx1.drawImage(bgImg,0,0,wWidth,wHeight); } /* 繪製紅線如下: */ ctx1.beginPath(); ctx1.moveTo(10,wHeight); ctx1.lineTo(10,wHeight-100); ctx1.lineWidth = 20; ctx1.strokeStyle = 'red'; ctx1.stroke(); ctx1.closePath();
但我F5按下依舊沒有變化,還是看不到紅線。
找了半天直到我把背景圖關掉才看到:
啊,原來他被背景圖蓋住啦!
可是,為什麼呢?
我在想有兩種可能
1、層級問題
2、先後問題
關於1,就像css的z-index那種感覺,是背景圖在上蓋住了紅線。難道說背景圖的層級比紅線高?
這個設想我沒法測試,於是放棄進行第二種可能的揭祕。
可是為什麼背景圖會在上呢?是因為背景圖後畫?
這個可以最簡便的通過console.log()列印觀察執行順序
原來“罪魁禍首”竟然是onload這個回撥。他跟定時器一樣,都是一個非同步任務。自然排在了同步任務(下邊的繪製線條)的後邊
所以前邊看似是一個很好的解決方法——onload,在這裡也暴露了他的弊端。
看來,promise學習大計宜趁早提上日程啊!很好