當我們加載一張圖片的時候,往往需要等到圖片完全加載出來才能看到圖片本身的顏色。這個等待過程往往很長,尤其是對于網速較慢的用戶來說,這種體驗更加糟糕。所以,我們需要一種方式來解決這個問題,這就是圖片顏色占位。
Vue為我們提供了v-lazy指令,用于圖片懶加載,這樣可以一定程度上解決圖片加載過慢的問題。但是,在圖片加載的過程中,用戶還是需要等待,這時候我們可以使用圖片顏色占位的方式,讓用戶在等待加載的時候,能夠先看到圖片的背景顏色。
在上面的pre標簽中,我們可以看到,我們使用了backgroundColor來設置圖片的背景顏色。那么我們怎么樣去獲取圖片的背景顏色呢?
computed: { backgroundColor() { let canvas = document.createElement('canvas'); let context = canvas.getContext('2d'); let img = new Image(); img.src = this.imageUrl; img.onload = function() { canvas.width = img.width; canvas.height = img.height; context.drawImage(img, 0, 0); } let data = context.getImageData(0, 0, canvas.width, canvas.height).data; let r = 0, g = 0, b = 0; for(let i = 0; i< data.length; i += 4) { r += data[i]; g += data[i + 1]; b += data[i + 2]; } r = Math.floor(r / (data.length / 4)); g = Math.floor(g / (data.length / 4)); b = Math.floor(b / (data.length / 4)); return `rgb(${r}, ${g}, $)`; } }
在上面的代碼中,我們通過創建一個canvas來獲取圖片的顏色。具體步驟如下:
- 首先,我們創建一個canvas元素和一個context。
- 接下來,我們創建一個img元素,并將imageUrl賦值給它的src屬性。
- 然后,我們監聽img元素的onload事件,在圖片加載完成之后,獲取canvas的大小,并將圖片繪制在canvas上。
- 接下來,我們使用context的getImageData函數,獲取圖像數據。
- 我們遍歷數據,將紅、綠、藍三種顏色的數值累加,并計算出平均值。
- 最后,我們將平均值返回,并使用rgb函數將這三種顏色的數值轉化成一個顏色字符串。
這樣,我們就可以通過這種方式,讓用戶在等待圖片加載的過程中,先看到圖片的背景顏色,這樣可以提升用戶體驗。
上一篇python 獲取類所有
下一篇mysql刪了表怎么恢復