本文章主要討論的是如何將一個(gè)純色二維碼變成彩色的。
前段時(shí)間公司業(yè)務(wù)上有這么一個(gè)需求，客戶(hù)不喜歡后臺(tái)生成的純色二維碼，純藍(lán)，純紫，純綠都不行，想要彩色二維碼。然后這個(gè)任務(wù)都落到我頭上了，因?yàn)槭菆D片處理，那主要思路就是靠canvas，canvas可以進(jìn)行像素操作，所以我進(jìn)行了一些嘗試，也踩了一點(diǎn)小坑，具體記錄如下。
前置知識(shí)
drawImage方法可以把圖片畫(huà)到canvas上，getImageData方法可以獲得一個(gè)矩形區(qū)域所有像素點(diǎn)的信息，返回值的data屬性是一個(gè)一維數(shù)組，儲(chǔ)存了所有像素點(diǎn)的信息，一個(gè)像素點(diǎn)的信息會(huì)占四個(gè)元素，分別代表r,g,b和透明度。而像素點(diǎn)在一維數(shù)組中的順序是從左到右，從上到下。最后就是putImageData方法，把更改過(guò)的像素信息數(shù)組重新扔回畫(huà)布上。
一些小坑
第一個(gè)坑就是canvas用屬性去給寬高，別用css;
第二個(gè)坑，做圖片處理好像得服務(wù)器環(huán)境，本地是不行的，聽(tīng)說(shuō)是基于什么安全考慮，最后我是通過(guò)搭本地服務(wù)器解決了canvas的報(bào)錯(cuò)。
第三個(gè)坑，棧溢出，這個(gè)目前還沒(méi)找到原因，后面會(huì)詳細(xì)講
