前段时间公司业务上有这么一个需求，客户不喜欢后台生成的纯色二维码，纯蓝，纯紫，纯绿都不行，想要彩色二维码。然后这个任务都落到我头上了，因为是图片处理，那主要思路就是靠canvas，canvas可以进行像素操作，所以我进行了一些尝试，也踩了一点小坑，具体记录如下。
前置知识
drawImage方法可以把图片画到canvas上，getImageData方法可以获得一个矩形区域所有像素点的信息，返回值的data属性是一个一维数组，储存了所有像素点的信息，一个像素点的信息会占四个元素，分别代表r,g,b和透明度。而像素点在一维数组中的顺序是从左到右，从上到下。最后就是putImageData方法，把更改过的像素信息数组重新扔回画布上。
一些小坑
第一个坑就是canvas用属性去给宽高，别用css;
第二个坑，做图片处理好像得服务器环境，本地是不行的，听说是基于什么安全考虑，最后我是通过搭本地服务器解决了canvas的报错。
第三个坑，栈溢出，这个目前还没找到原因，后面会详细讲
变色的思路
主要思路来自于《啊哈！算法！》里面深度优先搜索和广度优先搜索的章节，该章节的最后一部分的“宝岛探险”实现了给不同的区域依次编号，把编号看成染色，其实是一样的。
具体实现
其实所谓的彩色二维码，不是那种每个像素点颜色随机的二维码。仔细观察二维码就会发现，黑色的部分是一块一块的，他们分布在白色当中，就好像岛屿分布在海里，我们要做的就是把每个黑色块单独染色。黑色块的实质就是一个一个黑色的像素点。
前面也提到，我们使用canvas是因为可以进行像素操作，所以我们的操作其实是给像素点染色，我们显然不希望给背景色染色，所以背景色需要进行一个判断；前面也提到，背景色好像海洋分割了黑色的颜色块，那也就是说我们读一个像素点进行染色之后，不停的判断它右侧的像素点颜色，当出现背景色的时候就说明到达了边界，可以停止右方向的染色，但是每个像素点其实有四个相连接的方向，当一个像素点右边就是背景色，我们应该也去尝试别的方向的可能性，这个就是深度优先搜索，通过递归，不断的验证当前像素点的下一个位置的颜色，是背景色，那就回来，尝试别的方向；不是背景色，那就染色，然后对染色之后的这个像素点进行四个方向的验证。
有几点提一下，判断是不是背景色，肯定得比对rgba的值，所以颜色参数得做处理，另一个就是像素点信息的数组，每四个元素代表一个像素，所以想要比对正确的像素信息，这部分也要处理。
可能说的有点乱，我们看一下代码
第一部分，canvas
// canvas 部分 var canvas = $("canvas")[0]; var ctx = canvas.getContext("2d"); var img = new Image(); img.src = path; //这里的path就是图片的地址
第二部分，颜色的处理
// 分离颜色参数 返回一个数组 var colorRgb = (function() { var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; return function(str) { var sColor = str.toLowerCase(); if (sColor && reg.test(sColor)) { if (sColor.length === 4) { var sColorNew = "#"; for (var i = 1; i < 4; i += 1) { sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1)); } sColor = sColorNew; } //处理六位的颜色值 var sColorChange = []; for (var i = 1; i < 7; i += 2) { sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2))); } return sColorChange; } else { var sColorChange = sColor.replace(/(rgb\()|(\))/g, "").split(",").map(function(a) { return parseInt(a); }); return sColorChange; } } })();
第三部分，给初始参数
为了避免多余的操作，我们用一个标记数组来记录判断过的位置
// 参数 var bg = colorRgb("#fff"); //忽略的背景色 var width = 220; var height = 220; var imgD; //预留给 像素信息 var colors = ["#368BFF", "#EF2767", "#F17900", "#399690", "#5aa6f7", "#fd417e", "#ffc000", "#59b6a6"]; //染色数组 // 随机colors数组的一个序号 var ranNum = (function() { var len = colors.length; return function() { return Math.floor(Math.random() * len); } })(); // 标记数组 var book = []; for (var i = 0; i < height; i++) { book[i] = []; for (var j = 0; j < width; j++) { book[i][j] = 0; } }
第四部分，获取像素信息，对每个像素点进行遍历处理，最后扔回canvas
如果标记过，那就跳过，如果没标记过，那就随机一个颜色，深度优先搜索并染色