剛接手一個(gè)項(xiàng)目時(shí)后端丟給我一組圖像數(shù)據(jù)要求在瀏覽器里渲染成圖。我原以為就是把接口返回的字節(jié)流貼到頁面上結(jié)果打開一看是一個(gè)巨大的數(shù)組四個(gè)數(shù)字一組代表紅、綠、藍(lán)、透明度。那一刻我才意識(shí)到Canvas的“圖像數(shù)據(jù)”鏈路跟平常寫div、寫img完全是兩回事。如果你也是剛接觸Canvas的小白這篇文章就順著這條線講清楚圖像數(shù)據(jù)到底長(zhǎng)什么樣、怎么生成、怎么渲染上屏以及我在實(shí)際項(xiàng)目中踩過的那些坑。它適合所有準(zhǔn)備上手Canvas的前端同學(xué)也適合面試前臨時(shí)補(bǔ)圖像基礎(chǔ)的人。我盡量把話說直白不繞彎子。1. 先想清楚圖像數(shù)據(jù)從哪來、到哪去1.1 別把Canvas當(dāng)畫板把它當(dāng)“數(shù)據(jù)入口”很多教程習(xí)慣把Canvas比喻成一塊畫板教你用moveTo、lineTo畫線用fillRect畫方塊。這個(gè)比喻沒有錯(cuò)但它容易讓你忽略一件更重要的事Canvas的2D上下文本質(zhì)上是一塊“像素緩沖區(qū)”。它既能接收?qǐng)D形指令也能直接暴露底層像素?cái)?shù)據(jù)。拿到一塊畫布后你有兩條路可以走。第一條是調(diào)用繪圖API畫線、填充、變換瀏覽器幫你把這些向量指令“光柵化”成像素。第二條是先拿到像素?cái)?shù)組直接往內(nèi)存里填值再通過putImageData把數(shù)據(jù)“拍”回畫布。第二種方式繞過了所有圖形API操作的是最底層的像素本身。我后來做圖像處理類的功能幾乎全是走第二條路。原因很簡(jiǎn)單圖像數(shù)據(jù)一旦變成數(shù)組就能用JavaScript做任意數(shù)學(xué)運(yùn)算灰度、反色、縮放、降噪、卷積全都可以自己實(shí)現(xiàn)而且邏輯非常透明。相比之下依賴Canvas內(nèi)置API做復(fù)雜圖像處理反而束手束腳。const canvas document.createElement(canvas); canvas.width 200; canvas.height 100; const ctx canvas.getContext(2d);上面這段代碼創(chuàng)建了一塊200乘100像素的畫布。這里的width和height指的是像素矩陣的尺寸跟CSS里寫的寬高是兩碼事。很多人搞混這一點(diǎn)后面會(huì)專門講。1.2 一張圖在內(nèi)存里長(zhǎng)什么樣圖像數(shù)據(jù)在內(nèi)存里是按像素逐行排列的。每個(gè)像素由4個(gè)字節(jié)組成分別對(duì)應(yīng)紅色、綠色、藍(lán)色和透明度Alpha。所以一張寬w、高h(yuǎn)的圖片像素?cái)?shù)組的長(zhǎng)度一定是w * h * 4。位深通常是8位也就是每個(gè)通道的取值范圍是0到255。0表示沒有該顏色或完全透明255表示顏色最強(qiáng)或完全不透明。透明度通道比較特殊255是完全不透明0是完全透明。這跟一些設(shè)計(jì)軟件里“Alpha越大越透明”的直覺相反我第一次寫的時(shí)候反過來了。數(shù)組里具體怎么排假設(shè)圖片寬3像素、高2像素那么內(nèi)存數(shù)據(jù)是這樣的前4個(gè)數(shù)字是左上角第一個(gè)像素的RGBA接著4個(gè)數(shù)字是它右邊相鄰像素的RGBA一行走完后再換下一行。像素坐標(biāo)和數(shù)組索引的換算關(guān)系是固定的const idx (y * width x) * 4; const red data[idx]; const green data[idx 1]; const blue data[idx 2]; const alpha data[idx 3];這個(gè)公式就是圖像數(shù)據(jù)操作的心臟。無論你是生成圖像、做濾鏡、還是做像素級(jí)別的特效都繞不開它。我見過很多同學(xué)拿到data數(shù)組后直接data[i]當(dāng)像素用導(dǎo)致顏色錯(cuò)亂得離譜其實(shí)就是少乘了個(gè)4。1.3 為什么是Uint8ClampedArray0到255背后的原因你可能會(huì)好奇為什么圖像數(shù)據(jù)的類型是Uint8ClampedArray而不是普通數(shù)組或者Uint8Array。這里有兩個(gè)點(diǎn)要理解。第一類型化數(shù)組是為性能設(shè)計(jì)的。普通JavaScript數(shù)組可以存任意類型內(nèi)部結(jié)構(gòu)復(fù)雜訪問慢。而Uint8ClampedArray里每個(gè)元素只占1個(gè)字節(jié)內(nèi)存緊湊讀寫快。圖像動(dòng)輒上百萬像素用普通數(shù)組存會(huì)非常浪費(fèi)。第二Clamped的意思是“鉗制”。往這個(gè)數(shù)組里賦超過255的值會(huì)被自動(dòng)截?cái)喑?55賦負(fù)數(shù)會(huì)被截?cái)喑?。比如你寫了一行data[0] 300讀取的時(shí)候它已經(jīng)是255了不會(huì)像普通數(shù)組那樣保留300。這個(gè)行為在圖像處理里非常實(shí)用。做卷積、疊加素材時(shí)計(jì)算結(jié)果很容易超出合法范圍如果每次手動(dòng)判斷邊界代碼會(huì)很難看。Clamped數(shù)組幫你兜底那些越界值不會(huì)污染渲染結(jié)果。但如果需要保留中間計(jì)算精度就不能直接用Uint8ClampedArray存中間值得換成Float32Array最后再轉(zhuǎn)回來。我自己的習(xí)慣是中間計(jì)算用普通數(shù)組或Float32Array寫回ImageData前再統(tǒng)一轉(zhuǎn)成Uint8ClampedArray。2. 從零生成圖像數(shù)據(jù)直接抄的代碼與思路2.1 最小可用流程先建數(shù)據(jù)再寫像素生成圖像數(shù)據(jù)只需要兩步創(chuàng)建一個(gè)空的ImageData往里填像素然后把ImageData放回畫布。創(chuàng)建ImageData有兩種方式效果等價(jià)。// 方式一直接構(gòu)造 const imageData new ImageData(100, 100); // 方式二通過上下文創(chuàng)建 const imageData ctx.createImageData(100, 100);兩者的區(qū)別其實(shí)很小。new ImageData不依賴任何Canvas對(duì)象適合在Worker線程或純計(jì)算環(huán)境里用。ctx.createImageData是Canvas 2D上下文提供的方法樣式上更貼近畫布操作。兩種方式創(chuàng)建的ImageData初始狀態(tài)都是全透明黑色也就是RGBA全是0。填像素時(shí)核心就是給data數(shù)組的每個(gè)位置賦值。比如我要在(10, 20)這個(gè)坐標(biāo)畫一個(gè)純紅不透明的點(diǎn)const x 10; const y 20; const idx (y * imageData.width x) * 4; imageData.data[idx] 255; // R imageData.data[idx 1] 0; // G imageData.data[idx 2] 0; // B imageData.data[idx 3] 255; // A把data數(shù)組填好后調(diào)用putImageData就能看到結(jié)果。注意putImageData的第一個(gè)參數(shù)是ImageData第二、第三個(gè)參數(shù)是目標(biāo)坐標(biāo)表示從畫布的哪個(gè)位置開始覆蓋。ctx.putImageData(imageData, 0, 0);這一步做完圖像就已經(jīng)在屏幕上了。整個(gè)過程不涉及任何跟圖片文件相關(guān)的操作純靠?jī)?nèi)存數(shù)據(jù)生成畫面。2.2 生成一張漸變背景理解了像素坐標(biāo)和索引的換算生成漸變就非常簡(jiǎn)單。漸變本質(zhì)上就是“位置變化導(dǎo)致顏色變化”。我們讓紅色通道的值隨y坐標(biāo)線性變化越往下越紅就能得到一個(gè)垂直紅色漸變。function generateGradient(w, h) { const imageData new ImageData(w, h); const data imageData.data; for (let y 0; y h; y) { for (let x 0; x w; x) { const idx (y * w x) * 4; data[idx] Math.floor((y / h) * 255); // R隨y漸變 data[idx 1] 100; // G固定 data[idx 2] 200; // B固定 data[idx 3] 255; // 完全不透明 } } return imageData; }生成后直接ctx.putImageData(generateGradient(400, 200), 0, 0)就能看到一條從黑到紅的漸變。這里有兩個(gè)性能相關(guān)的細(xì)節(jié)。第一循環(huán)里面做了除法再取整如果圖特別大可以考慮把(y / h) * 255提到內(nèi)層循環(huán)外面因?yàn)橥恍兴邢袼氐倪@個(gè)值是一樣的。第二如果一行像素顏色完全相同可以用data.fill()或者data.set()一次性填充一段連續(xù)區(qū)域比逐像素賦值快很多。2.3 用算法生成紋路噪點(diǎn)、條紋與粒子圖像數(shù)據(jù)的趣味性在于任何數(shù)學(xué)公式都能變成畫面。比如生成隨機(jī)噪點(diǎn)全圖每個(gè)像素隨機(jī)RGB效果就像老電視的雪花屏for (let y 0; y h; y) { for (let x 0; x w; x) { const idx (y * w x) * 4; data[idx] Math.random() * 255; data[idx 1] Math.random() * 255; data[idx 2] Math.random() * 255; data[idx 3] 255; } }如果把隨機(jī)改成取模運(yùn)算就能生成條紋。下面這個(gè)例子用x % 64 32作為黑白判斷得到等間距的豎直條紋for (let y 0; y h; y) { for (let x 0; x w; x) { const idx (y * w x) * 4; const v (x % 64 32) ? 255 : 0; data[idx] v; data[idx 1] v; data[idx 2] v; data[idx 3] 255; } }我經(jīng)常用這種方式快速生成占位圖、測(cè)試紋理和動(dòng)畫背景。原理都一樣確定坐標(biāo)算出顏色寫進(jìn)數(shù)組。你甚至可以讀一張真實(shí)的圖片遍歷它的像素按自己的規(guī)則重新映射顏色做風(fēng)格化濾鏡。2.4 完整示例把圖像數(shù)據(jù)渲染上屏把前面幾段拼起來就是一套完整的“從數(shù)據(jù)到屏幕”流程。新建一個(gè)HTML文件直接打開就能看到效果!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleCanvas 圖像數(shù)據(jù)示例/title /head body canvas idscreen width320 height180/canvas script const canvas document.getElementById(screen); const ctx canvas.getContext(2d); const w canvas.width; const h canvas.height; const imageData new ImageData(w, h); const data imageData.data; for (let y 0; y h; y) { for (let x 0; x w; x) { const idx (y * w x) * 4; data[idx] Math.floor((x / w) * 255); data[idx 1] Math.floor((y / h) * 255); data[idx 2] 128; data[idx 3] 255; } } ctx.putImageData(imageData, 0, 0); /script /body /html這段代碼生成了一張水平由黑到紅、垂直由黑到綠的漸變圖。紅綠混合后畫面會(huì)呈現(xiàn)從黑到黃再到橙色的過渡。你可以試著把固定值改成其他算法畫面會(huì)立即跟著變。3. 渲染上屏的路徑選擇從像素到圖片全流程3.1 putImageData原樣覆蓋不做任何加工putImageData 是最直接的“上屏”方式。它把ImageData里的像素原封不動(dòng)地寫到畫布上不做縮放、不做合成、不受Canvas當(dāng)前變換影響。也就是說即使你之前調(diào)用了ctx.scale(2, 2)putImageData 也不會(huì)被放大2倍。這個(gè)特性既是優(yōu)點(diǎn)也是陷阱。優(yōu)點(diǎn)在于數(shù)據(jù)精確適合圖像處理類任務(wù)陷阱在于如果你想對(duì)圖像做縮放直接調(diào)用putImageData是做不到的。實(shí)際項(xiàng)目中我常常把ImageData先放進(jìn)一個(gè)離屏Canvas再用drawImage去縮放、旋轉(zhuǎn)、合成。這個(gè)流程下一步講。另一個(gè)需要注意的點(diǎn)是putImageData是“覆蓋”操作。它會(huì)用你傳入的ImageData矩形區(qū)域直接覆蓋畫布上對(duì)應(yīng)坐標(biāo)的內(nèi)容。如果ImageData包含透明像素那透明部分也會(huì)覆蓋掉底下的內(nèi)容而不是跟下面做Alpha混合。所以當(dāng)你要把圖像數(shù)據(jù)疊加到已經(jīng)畫好的背景上時(shí)請(qǐng)先想清楚是想要覆蓋還是想要合成。覆蓋用putImageData合成用drawImage。3.2 drawImage把數(shù)據(jù)變成可以繼續(xù)創(chuàng)作的“素材”drawImage是Canvas 2D里最靈活的上屏方式之一。它接收Image、Canvas或Video對(duì)象作為源圖。我們可以把圖像數(shù)據(jù)先寫入一個(gè)隱藏Canvas再通過drawImage把它畫到目標(biāo)Canvas上。這樣做的好處是drawImage支持縮放、旋轉(zhuǎn)、透明度調(diào)整還能參與合成模式。比如我想把一張320x180的圖像數(shù)據(jù)放大兩倍顯示在頁面上// 離屏Canvas用于承載圖像數(shù)據(jù) const offscreen document.createElement(canvas); offscreen.width 320; offscreen.height 180; const offCtx offscreen.getContext(2d); offCtx.putImageData(imageData, 0, 0); // 目標(biāo)Canvas放大繪制 const target document.getElementById(screen); const ctx target.getContext(2d); ctx.drawImage(offscreen, 0, 0, 640, 360);這里把離屏Canvas當(dāng)作一張“內(nèi)存里的圖片”drawImage時(shí)一次性完成放大。放大必然產(chǎn)生像素插值所以邊緣會(huì)比原始像素?cái)?shù)據(jù)稍微模糊一些這是正?，F(xiàn)象。如果你需要把圖像數(shù)據(jù)跟已有畫面疊加合成也可以先drawImage畫背景再drawImage畫圖像數(shù)據(jù)。兩者可以相互配合組合出比單用putImageData豐富得多的效果。3.3 導(dǎo)出圖片toDataURL與toBlob怎么選圖像數(shù)據(jù)不一定只在屏幕上給人看經(jīng)常還要導(dǎo)出成圖片文件上傳到服務(wù)器或者讓用戶下載。Canvas提供了兩個(gè)導(dǎo)出接口toDataURL和toBlob。// 同步生成base64數(shù)據(jù)URL const dataUrl canvas.toDataURL(image/png); // 異步生成Blob回調(diào)接收 canvas.toBlob((blob) { // blob 可以用于上傳或創(chuàng)建下載鏈接 }, image/png, 0.9);兩者的核心區(qū)別在于toDataURL是同步的大圖轉(zhuǎn)換時(shí)會(huì)卡住主線程toBlob是異步的不阻塞渲染。在Web Worker不可用的場(chǎng)景里導(dǎo)出2K、4K大圖時(shí)我一般優(yōu)先toBlob。拿到Blob后想觸發(fā)瀏覽器下載標(biāo)準(zhǔn)做法是創(chuàng)建ObjectURL再模擬點(diǎn)擊canvas.toBlob((blob) { const url URL.createObjectURL(blob); const a document.createElement(a); a.href url; a.download image.png; a.click(); URL.revokeObjectURL(url); }, image/png);導(dǎo)出格式要注意PNG支持透明背景JPEG不支持透明通道透明區(qū)域會(huì)被強(qiáng)制壓成黑色。很多同學(xué)導(dǎo)出JPEG后抱怨“背景變黑了”原因就在這里。解決辦法是導(dǎo)出前先給Canvas填充一個(gè)白色背景比如ctx.fillStyle #fff; ctx.fillRect(0, 0, w, h);然后再把原內(nèi)容畫上去。3.4 大圖的性能優(yōu)化離屏Canvas與Worker純像素操作一旦碰上大圖性能問題立刻暴露。比如處理2048x2048的圖像每幀都要遍歷400多萬像素主線程就算只算一次也會(huì)有明顯卡頓。優(yōu)化方向有兩個(gè)離屏Canvas和OffscreenCanvas。離屏Canvas是常規(guī)優(yōu)化。把反復(fù)繪制的靜態(tài)內(nèi)容放進(jìn)隱藏Canvas主畫布只做拷貝省去重復(fù)計(jì)算和繪制。這個(gè)技術(shù)成本低、收益大幾乎適用于所有Canvas場(chǎng)景。// 離屏Canvas緩存靜態(tài)背景 const bgCanvas document.createElement(canvas); bgCanvas.width 1920; bgCanvas.height 1080; const bgCtx bgCanvas.getContext(2d); // ...繪制靜態(tài)內(nèi)容 // 每幀只需拷貝 ctx.drawImage(bgCanvas, 0, 0);OffscreenCanvas更進(jìn)一步它可以脫離DOM運(yùn)行在Web Worker里。Worker沒有主線程壓力非常適合做像素?cái)?shù)據(jù)生成、濾鏡計(jì)算這類CPU密集任務(wù)。計(jì)算完成后把像素?cái)?shù)據(jù)或OffscreenCanvas轉(zhuǎn)移回主線程再渲染上屏。// 主線程 const offscreen new OffscreenCanvas(w, h); worker.postMessage({ canvas: offscreen }, [offscreen]); // Worker線程 self.onmessage function(e) { const canvas e.data.canvas; const ctx canvas.getContext(2d); // 在Worker里做像素計(jì)算... self.postMessage(canvas, [canvas]); };初次接觸可能會(huì)困惑OffscreenCanvas怎么傳到Worker的關(guān)鍵就在postMessage的第二個(gè)參數(shù)傳的是一個(gè)Transferable列表。Canvas被轉(zhuǎn)移后主線程就不再持有它這是零拷貝的移動(dòng)方式性能遠(yuǎn)高于結(jié)構(gòu)體克隆。4. 小白避坑實(shí)錄最容易翻車的6個(gè)問題4.1 跨域圖片導(dǎo)致getImageData報(bào)錯(cuò)我用一段線上圖片生成圖像數(shù)據(jù)時(shí)第一次就碰上了 SecurityError。原因是Canvas被“污染”了你往Canvas上畫了一張跨域圖片瀏覽器為了保證用戶隱私禁止你調(diào)用getImageData讀取像素。這個(gè)策略跟圖片顯示本身無關(guān)圖片能正常顯示但讀取數(shù)據(jù)被禁。解決辦法是加載圖片時(shí)設(shè)置crossOrigin anonymous同時(shí)服務(wù)器必須返回Access-Control-Allow-Origin響應(yīng)頭。兩個(gè)條件缺一不可。比如使用圖片const img new Image(); img.crossOrigin anonymous; img.onload function() { ctx.drawImage(img, 0, 0); const data ctx.getImageData(0, 0, w, h); }; img.src https://example.com/image.jpg;如果圖片服務(wù)不支持CORS那么Canvas被污染后沒有客戶端繞過的辦法只能在服務(wù)端做代理或要求源站加響應(yīng)頭。另外一個(gè)細(xì)節(jié)用file://協(xié)議直接打開本地HTML即使圖片也在本地很多瀏覽器同樣會(huì)報(bào)跨域錯(cuò)誤。調(diào)試時(shí)最好起一個(gè)本地HTTP服務(wù)比如npx serve別用雙擊文件的方式。4.2 設(shè)置canvas.width導(dǎo)致畫布被清空我在寫一個(gè)響應(yīng)式Canvas組件時(shí)踩過這個(gè)坑監(jiān)聽到窗口尺寸變化后動(dòng)態(tài)給canvas.width賦值結(jié)果整個(gè)畫布突然全沒了。實(shí)際上設(shè)置 canvas.width 或 canvas.height 會(huì)清空畫布內(nèi)容同時(shí)重置Canvas的全部繪圖狀態(tài)包括當(dāng)前變換矩陣、合成模式等。這不是bug是規(guī)范行為。想動(dòng)態(tài)調(diào)整尺寸時(shí)要在賦值之后重新執(zhí)行所有繪制邏輯包括重新設(shè)置樣式和重畫內(nèi)容。如果項(xiàng)目里涉及窗口縮放建議把繪制流程封裝成一個(gè)統(tǒng)一的render()函數(shù)尺寸變化時(shí)先改寬高再調(diào)用render()。另外頻繁修改canvas尺寸會(huì)觸發(fā)昂貴的底層緩沖區(qū)重新分配。一次會(huì)話里盡量把尺寸設(shè)置到位不要在一幀里反復(fù)改。4.3 高分屏模糊與CSS尺寸常規(guī)前端里為了讓Canvas適配高清屏很多人直接設(shè)canvas.width 800; canvas.height 600然后用CSS把它縮放到小尺寸顯示。這樣做在小屏幕上會(huì)糊。因?yàn)闉g覽器的物理像素比CSS像素細(xì)Canvas默認(rèn)按CSS像素渲染渲染結(jié)果再被視網(wǎng)膜屏放大自然就模糊了。標(biāo)準(zhǔn)做法是const dpr window.devicePixelRatio || 1; canvas.width cssWidth * dpr; canvas.height cssHeight * dpr; ctx.scale(dpr, dpr);繪圖時(shí)按CSS尺寸的邏輯坐標(biāo)操作瀏覽器會(huì)負(fù)責(zé)把實(shí)際像素映射到高清屏。但要注意putImageData是像素級(jí)別的操作它不認(rèn)transform。如果想讓圖像數(shù)據(jù)本身在高清屏上保持銳利要么生成尺寸為物理像素大小的ImageData要么把ImageData放進(jìn)離屏Canvas再用drawImage繪制。我自己傾向于后者因?yàn)閐rawImage會(huì)正確處理dpr變換。4.4 像素索引錯(cuò)位data[i]到底對(duì)應(yīng)哪個(gè)點(diǎn)最常見的bug是把data[i]當(dāng)成第 i 個(gè)像素。前面說過數(shù)組每個(gè)像素占4個(gè)位置所以遍歷像素時(shí)步長(zhǎng)必須是4。許多人寫for (let i 0; i data.length; i)然后把每個(gè)字節(jié)都當(dāng)成一個(gè)像素結(jié)果圖變成了一堆雜亂豎條紋。正確的遍歷模式只有一種要么外層循環(huán)坐標(biāo)內(nèi)層算索引乘4要么步長(zhǎng)為4的循環(huán)。推薦前者可讀性好。for (let y 0; y h; y) { for (let x 0; x w; x) { const idx (y * w x) * 4; // 操作 data[idx] ~ data[idx 3] } }調(diào)試這類問題有個(gè)技巧先只設(shè)置一個(gè)像素為不透明白色其余全黑如果能看到一個(gè)白點(diǎn)出現(xiàn)在預(yù)期位置說明坐標(biāo)換算是對(duì)的如果白點(diǎn)出現(xiàn)在完全相反的位置那大概率是x和y寫反了或者row stride算錯(cuò)了。4.5 putImageData之后“沒變化”的幾個(gè)原因有人寫完像素?cái)?shù)組后調(diào)用putImageData發(fā)現(xiàn)畫面毫無變化就以為是自己代碼錯(cuò)了。我總結(jié)過這類問題最常見的三種情況第一你通過getImageData從Canvas里讀取了數(shù)據(jù)修改了data數(shù)組但沒有調(diào)用putImageData寫回去。修改data數(shù)組本身只是在內(nèi)存里改Canvas表面不會(huì)自動(dòng)更新。必須顯式putImageData才能讓改動(dòng)上屏。第二putImageData的目標(biāo)坐標(biāo)或?qū)捀叱隽水嫴挤秶utImageData不做裁剪超出范圍的部分會(huì)直接不顯示。如果你用了一張320x180的數(shù)據(jù)放到200x100的畫布上超出底部的部分就看不到。第三ImageData寬高跟Canvas寬高不一致。很多同學(xué)創(chuàng)建ImageData時(shí)沒注意寬高導(dǎo)致畫布上只顯示了一部分。排查時(shí)可以先打印imageData.width、imageData.height和目標(biāo)Canvas的寬高關(guān)系再看putImageData的坐標(biāo)參數(shù)問題很容易定位。4.6 導(dǎo)出圖片黑底、透明丟失與內(nèi)存爆炸前面提到JPEG導(dǎo)出透明區(qū)域會(huì)變黑這是最常碰到的導(dǎo)出坑。除了先填充白底另一個(gè)方案是判斷用戶的導(dǎo)出需求如果產(chǎn)品只需要背景色可以把背景色填充為產(chǎn)品主題色而不是純白視覺效果更好。內(nèi)存方面也要留意。一張4096x4096的畫布ImageData數(shù)組長(zhǎng)度就是4096乘4096乘4約6700萬個(gè)字節(jié)差不多64MB。如果再同時(shí)保留多個(gè)ImageData副本、幾個(gè)Canvas緩存內(nèi)存很容易突破幾百M(fèi)B。移動(dòng)端更明顯頁面會(huì)直接白屏或崩潰。處理原則是能復(fù)用就復(fù)用不用的ImageData盡早置空引用大尺寸導(dǎo)出時(shí)用toBlob異步做別讓主線程長(zhǎng)時(shí)間卡死復(fù)雜計(jì)算挪到Worker層。5. 從“數(shù)據(jù)”到“生產(chǎn)力”進(jìn)階玩法與真實(shí)場(chǎng)景5.1 三行代碼實(shí)現(xiàn)灰度濾鏡圖像數(shù)據(jù)最大的價(jià)值是可以用JavaScript直接做圖像處理。比如灰度化只需要把每個(gè)像素的RGB替換成亮度值。亮度公式不是簡(jiǎn)單的取平均而是按人眼敏感度加權(quán)const gray r * 0.299 g * 0.587 b * 0.114;綠色占比最高因?yàn)槿搜蹖?duì)綠色最敏感藍(lán)色占比最低。用這個(gè)公式得到的灰度更符合視覺感受。完整實(shí)現(xiàn)就是把一副畫布內(nèi)容讀出來遍歷像素寫入新值再放回去const imageData ctx.getImageData(0, 0, w, h); const data imageData.data; for (let i 0; i data.length; i 4) { const gray data[i] * 0.299 data[i 1] * 0.587 data[i 2] * 0.114; data[i] gray; data[i 1] gray; data[i 2] gray; } ctx.putImageData(imageData, 0, 0);反色更簡(jiǎn)單每個(gè)通道用255減原值。這兩個(gè)例子看起來簡(jiǎn)單但它們是所有圖像處理算法的基礎(chǔ)。前端面試題里如果讓你實(shí)現(xiàn)濾鏡或者圖像處理核心考的就是這三個(gè)能力拿數(shù)據(jù)、算數(shù)據(jù)、寫數(shù)據(jù)。5.2 圖像數(shù)據(jù)在項(xiàng)目里的真實(shí)應(yīng)用走出demo圖像數(shù)據(jù)在業(yè)務(wù)里其實(shí)有非常多的用武之地。工業(yè)檢測(cè)里采集到的圖像經(jīng)常需要前端先做預(yù)處理再上傳比如裁剪、壓縮、加標(biāo)注。你把像素?cái)?shù)據(jù)遍歷一遍去掉無效區(qū)塊再導(dǎo)出成小圖上傳能省下大量帶寬。界面開發(fā)里有時(shí)需要根據(jù)業(yè)務(wù)數(shù)據(jù)動(dòng)態(tài)生成背景紋理。比如把服務(wù)器返回的一組數(shù)值映射成色塊生成熱力圖。ImageData天然適合這種場(chǎng)景數(shù)值高就偏紅數(shù)值低就偏藍(lán)一個(gè)循環(huán)搞定。桌面端開發(fā)里如果你用Electron這類框架渲染進(jìn)程和主進(jìn)程之間傳數(shù)據(jù)時(shí)會(huì)涉及類型化數(shù)組。ImageData的data數(shù)組本質(zhì)上是ArrayBuffer的視圖可以把它轉(zhuǎn)移或克隆給主進(jìn)程使用。這個(gè)鏈路跟普通前端里Canvas像素處理一模一樣只是多了一層進(jìn)程間通信。還有一類很有意思的應(yīng)用是像素畫生成器。把文字、ID或者任意字符串通過哈希算法映射成一串?dāng)?shù)值再按規(guī)則填進(jìn)ImageData就能生成獨(dú)一無二的抽象圖案。這種“數(shù)據(jù)變圖像”的思路很適合做簽名、驗(yàn)證碼周邊或者生成視覺化身份標(biāo)識(shí)。5.3 我留給自己的雞生蛋思路如果讓我給一個(gè)剛接觸Canvas的新手規(guī)劃學(xué)習(xí)路線我會(huì)建議先放棄花哨的繪圖API老老實(shí)實(shí)從ImageData做起。因?yàn)槔斫饬讼袼財(cái)?shù)組你就理解了Canvas的底層邏輯反過來看那些花哨API多數(shù)就是“幫你把像素運(yùn)算封裝好”。我自己做圖像類功能時(shí)固定套路是三步先確定數(shù)據(jù)格式再?zèng)Q定要不要放在離屏Canvas處理最后才考慮上屏方式。如果性能要求高再評(píng)估是否上OffscreenCanvas加Worker。這個(gè)套路幫我避免了大部分“寫一半發(fā)現(xiàn)架構(gòu)不對(duì)”的問題。最后分享一個(gè)小技巧當(dāng)你需要反復(fù)生成、處理圖像數(shù)據(jù)時(shí)把“像素坐標(biāo)換算成數(shù)組索引”抽成工具函數(shù)放進(jìn)工具庫比如getPixelIndex(x, y, width)。你會(huì)發(fā)現(xiàn)幾乎所有圖像代碼都要用到它抽出來之后代碼會(huì)變得干凈很多。Canvas這條路入門門檻不高但真正要寫出可靠、高性能的圖像處理模塊細(xì)節(jié)全在這些日常積累里。