纯前端实现图片背景透明化

前言

不论是做一些2d的小游戏，或者制作小图标，或者抠图都需要用到这个功能，对图片的背景进行透明化，是我们经常需要用到的一个功能。

通常情况下我们都会去下载PS或者美图秀秀这样的软件去制作。

但是我真的不想仅仅为了做个透明图像就去下载这些软件，这些软件不仅体积大，要下载个半天，放在电脑上也占空间。

最重要的是每次我做这个事情，都需要去临时百度一下制作透明图片的方法。

这些软件固然强大，但是功能的众多或者需要一些基础知识，往往造成了一些门槛。

简单点说，虽然瑞士军刀很6，但是我现在只需要一把起子，我不想知道什么蒙版图层，不想在一堆什么美颜什么各种滤镜之中找半天，我就想上传个图片点两下就好了。

那么能不能在线对图片进行背景透明化呢？

当然是有的，下面是网址

http://www.aigei.com/bgremover/

你以为我是来推荐网站的？当然不是。

我之所以提到这个网站，是因为我以前就是用这个做一些处理的，但是真的不是很给力啊。

我并不知道它的原理，也没有看过它的代码，但是它的缺陷很明显：

1. 不能对指定颜色进行透明化
2. 当需要对色差很大的多种颜色进行透明化时，无能为力
3. 对一些图片的透明化处理不够完美，会出现锯齿，但是又无法进行进一步处理
4. 对复杂图片完全无能为力

有问题就解决问题呗，于是就有了今天的小玩意。

作品

与之前的作品一样，直接将功能写在这篇博客里了，所以可以直接在博客园中使用。

使用方法：

1. 上传图片
2. 点击图片，将以鼠标点击处的颜色为标准，对色差20之内的颜色进行透明化处理。（如果想调整色差标准，可以在控制台下设置transparentConfig.colorDiff）
3. 对出现透明化处理有有误的地方，可以开启恢复模式，再次移动鼠标到图片上，此时鼠标会变成红色小方框，小方框区域内会显示原始图像。点击后会将红色小方框区域内的图像恢复为原始图像。（如果想调整小方框尺寸，可以在控制台下通过transparentConfig.setRecoverSize(30)的方式进行修改）
4. 下载图片，搞定。

当然按照本懒人的惯例，还是只在chrome浏览器下实现，所以如果您用其它浏览器的话可能无法正常操作。

不过本应用的核心功能与以往一样都是可以在现代浏览器中实现的，只是需要您调一下兼容性。

如果您有闲情逸致，想研究一下的话，这是本项目的 GitHub地址，为了能方便复制进博客园，所以代码是直接写在html中的。

少说废话，以下为应用：

选择背景图 开启恢复模式

 

技术点

本应用依然只使用纯前端实现，涉及到的技术点如下：

1. 获取图片文件
2. 将文件转换为图片,并放入canvas中
3. 点击canvas获取点击处的颜色信息
4. 根据指定颜色，对图像中在色差范围内的颜色进行透明化处理
5. 自定义鼠标，在鼠标上显示指定区域内原始图像
6. 对图像上指定区域，进行图像还原操作
7. 下载图片

其中技术点1，2，7在之前的一篇博客中有涉及到，所以这里就不再赘述，不了解的可以去看一下我之前写的那篇博客：在博客园里给图片加水印(canvas + drag)

那么，接下来就让我们看一下具体的实现吧。

点击图片获取点击处的颜色信息

通过type为file类型的input获取到文件，然后通过FileReader读取文件信息后放入到canvas中。

这是前两步所做的工作，现在我们需要做的是点击图像（实际上是canvas）获取到点击处的颜色信息。

首先我们需要获取到原始图像的像素信息，并保存下来，这一步在图片加载时实现，部分代码如下：

var ctx = document.getElementById('target_canvas').getContext('2d');
imgDataArr = ctx.getImageData(0, 0, imgWidth, imgHeight).data;

 小课堂开始：

canvas的getImageData会获取canvas中指定区域内的图像信息，返回一个ImageData对象。

ImageData对象的data属性的值是一个Uint8ClampedArray对象，而这个对象就是图像的像素信息。

Uint8ClampedArray看名字可以了解到，它是一个定型数组，里面的值都是0-255范围之内的值。

假如我们有一个图片只有四个像素，长2px，宽2px。左上角的像素和右下角的像素为黑色，而右上角和左下角的像素为白色。

如下图：