使用canvas制作魔方墙

通过对图片每个像素点的操作，可以做出很多有意思的东西，比如说图片马赛克、颜色反转、简单的抠图等功能。

图片马赛克

与上面制作魔方图的原理相同，去掉颜色转换的步骤，可以直接取每个小方块的左上角或中间的像素颜色作为小方块的颜色。

const { width, height } = ImgRef.current;
const gap = 10;
for (var h = 0; h < height; h+=gap) {for(var w = 0; w < width; w+=gap){var position = (width * h + w) * 4 * gap;var r = imageData[position], g = imageData[position + 1], b = imageData[position + 2];let color = `rgb(${r},${g},${b})`;ctx.fillStyle = color;ctx.fillRect(w, h, gap, gap);}
}


颜色反转

将 rgb 的各自的值都用 255 减一下

function ReversalColor(r: number, g: number, b: number): string {return `rgb(${255-r},${255-g},${255-b})`;
}


抠图

这里只能做一些简单的抠图，如果要实现一些复杂的抠图，需要配合很好的算法。

可以设置一些目标颜色，将匹配的与目标色相同的像素点的透明度设置为 0 即可。主要要值得注意的是，不能使用上面重新绘制的方式，重新绘制是在原来的图片上面覆盖一层，得到的结果并不是透明的png图片。这里需要使用修改原数据的方式实现，后面会讲到。

换颜色

将指定颜色换为目标色，可用于更换头像背景色。

下载图片

将canvas内容转为图片链接，然后进行下载。当然也可以鼠标右键直接下载。

function downloadImage() { const canvas: any = document.getElementById(&＃39;canvas&＃39;); const imgUrl = canvas.toDataURL("image/png"); console.log(imgUrl); const a = document.createElement(&＃39;a&＃39;); a.download = &＃39;图片.jpg&＃39;; a.href = imgUrl; a.setAttribute(&＃39;download&＃39;, &＃39;chart-download&＃39;); a.click();}


优化

为了更加方便的处理，我把这几个功能做成了一个小项目，可以点击这里进行体验。

现在可以很方便的切换不同的模式，并且可以设置像素大小，目标色也可以自定义（目前还没有做，近期会加上去）。

当我把像素大小设置为1时，相当于对每个像素点都需要进行处理，有10000个像素的话就需要画10000个小方块，导致页面出现卡顿现象。

优化一下之前方案，之前是采用重新绘制的方式，其实我们也可以修改原数据的方式。通过 getImageData 方法可以得到你一个 ImageData 对象。

其中 data 是一个 Uint8ClampedArray (8位无符号整型固定数组） 类型化数组表示一个由值固定在0-255区间的8位无符号整型组成的数组；如果你指定一个在 [0,255] 区间外的值，它将被替换为0或255；如果你指定一个非整数，那么它将被设置为最接近它的整数。

通过处理数据的方式比重绘的方式要复杂一些，涉及到数据的计算，比如我们现在要将下面这个小方块的区域全部设置为一种颜色：

首先我们知道方块左上角第一个像素的起始索引值 positon ，小方块的宽高 gap，图片的宽度 width 。

for (let y = 0; y < gap; y++) { for (let x = 0; x < gap; x++) { const point = position + (x + width * y) * 4; imageObj.data[point] = r; imageObj.data[point + 1] = g; imageObj.data[point + 2] = b; imageObj.data[point + 3] = a; }}


point 为目标像素点的索引值，这里要注意一点，只能通过设置每一位方式去设置值，不能使用数组的 splice 方法批量处理。Uint8ClampedArray 上不存在这个方法。处理数据后，使用 putImageData 方法绘制图片，完整代码如下：

function handleImageData() { setCanDownload(false); const canvas: any = document.getElementById(&＃39;canvas&＃39;); const ctx = canvas.getContext(&＃39;2d&＃39;); const { width, height } = ImgRef.current; canvas.width = width; canvas.height = height; ctx.drawImage(ImgRef.current, 0, 0, width, height); const imageObj = ctx.getImageData(0, 0, width, height); const { data } = imageObj; for (var h = 0; h < height; h+=gap) { for(var w = 0; w < width; w+=gap){ var position = (width * h + w) * 4; var r = data[position], g = data[position + 1], b = data[position + 2], a = data[position + 3]; for (let y = 0; y < gap; y++) { for (let x = 0; x < gap; x++) { const point = position + (x + width * y) * 4; imageObj.data[point] = r; imageObj.data[point + 1] = g; imageObj.data[point + 2] = b; imageObj.data[point + 3] = a; } } } } ctx.putImageData(imageObj, 0, 0, 0, 0, width, height);}


但是处理后的效果图第一列看起来有些问题，第一列的宽度并不是设置的宽度，并且颜色也有点问题。

当时想了很久才找到原因，如果是第一种方案，是在一张画布上根据左上角的坐标进行绘制一个小方块，如果方块部分区域超出了画布区域，则会隐藏，看到的效果会是最后一行和最后一列可能出现非完整小方块的现象，这属于正常的。

但是通过处理数据的方式就有所不同，当计算出的索引值大于了某一行最后一个像素的索引值时，则会自动换到下一行的起始位置去，得到的结果就是上图，第一列其实是最后一列缺失的部分。

因此这需要增加一个判断：

for (let y = 0; y < gap; y++) { for (let x = 0; x < gap; x++) { const point = position + (x + width * y) * 4; if (point < (h + y + 1) * width * 4) { // 增加判断 imageObj.data[point] = r; imageObj.data[point + 1] = g; imageObj.data[point + 2] = b; imageObj.data[point + 3] = a; } }}


分析：(h + y + 1) * width * 4 表示当前行的最后一个点的位置，如果 point 大于了这个值，则表示在画布之外。

最后来看一下处理人像效果吧！

示例代码是使用 JSX 写的，可以点击 下载源码 自行下载。