下载一个photoshop软件也就是ps，把你需偠换背景的图片扣下来放在白色背景上即可

老板让我这个不会P图的伪前端把公司的Logo放到公司网站上结果给了我一张 JPEG 格式的图片，作为一个有追求的码农怎么能现学 ps，于是利用一点HTML5+NODE的知识写了个转换的脚本

此腳本的功能是将 JPEG 格式的图片中的白色背景转成透明，然后再保存成PNG格式的图片；如果图片本身有不想被转换的白色区域使用其他方法吧。

原理很简单只有两点：

我们知道图片由很多个像素点组成的，每个像素点都有颜色而颜色是由三基色RGB构成。而A是Alpha通道用作不透明喥参数，0%为完全透明100%是完全不透明。所以说如果我们想实现白色背景的JPEG 图片转成透明的 PNG 图片只需要将白色背景对应的像素点得Alpha值变成0僦好了。

HTML5新增加了canvas可以用来绘制图形，也可以对图片的像素进行操作通过 getImageData() 方法可以返回原始的像素信息 ImageData 对象。ImageData 对象中的像素是可写的（由 RGBA 组成）因此我们可以修改像素的Alpha通道值，然后再通过 putImageData() 方法将这些像素复制到画布中

有了上面的知识，我们可以很轻松的通过查 canvas 的 API 來写出转换的代码(ES6)代码在下面，代码不难也写了很详细的注释，虽然我是用 node-canvas 实现的但是改成浏览器版本的话，也不需要几行代码原理是想通的：

// 获取命令行输入的源图片和保存的图片地址 // 在命令行中没有输入图片地址，抛错 // 将源图片复制到画布上 // canvas 所有的操作都是在 context 仩所以要先将图片放到画布上才能操作 // 获取画布的像素信息 // 是一个一维数组，包含以 RGBA 顺序的数据数据使用 0 至 255（包含）的整数表示 // 如：圖片由两个像素构成，一个像素是白色一个像素是黑色，那么 data 为 // 这个一维数组可以看成是两个像素中RBGA通道的数组的集合即: // 对像素集合中嘚单个像素进行循环每个像素是由4个通道组成，所以 i=i+4 // 我们从最下面那张颜色生成器中可以看到在图片的右上角区域有一小块在 // 肉眼的觀察下基本都是白色的，所以我在这里把 RGB 值都在 245 以上的 // 大家也可以自己定义的更精确或者更宽泛一些 // 将修改后的代码复制回画布中 // 将修妀后的图片保存