利用canvas实现一个抠图小工具

本文作者：IMWeb 孙世吉原文出处：IMWeb社区 未经同意，禁止转载

利用canvas实现一个抠图小工具

0 前言

作为新一代的前端开发工程师，PS抠图切图已经不是必备技能了，我们有UI/交互/视觉等更专业的设计同学帮我们做这个事情。但是有时候还是有一些简单的图片处理工作需要我们去做，例如对图片进行剪裁，调整透明度或者调整图片内的文字等等等。这时候如果有一点PS经验那当然更好，如果没有或者当前的开发环境不一定安装了PS等工具，那我们可能需要去找在线图片处理工具来帮我们完成这些工作。

1 Canvas

老话说得好，一个不想当将军的士兵不是好士兵；一个不想自己写工具的程序猿不是好程序猿。那其实上面提及的一些简单图片处理是可以通过Canvas来帮我们实现的。

canvas是一个可以使用脚本(通常为JavaScript)在其中绘制图形的 HTML 元素。它可以用于制作照片集或者制作简单(也不是那么简单)的动画.。

基本的API文档可以看这里

宋丹丹老师说得好：

要把大象放冰箱，总共分三步：一先把冰箱门打开；二把大象放进去；三把冰箱门带上。

整个Canvas图片处理工具大致也可以分为三步。

1、读取图片资源；
2、把图片资源绘制到画板上；
3、作为前端开发的你可以开始为所欲为了；

先看一下很简单的HTML结构和CSS样式

代码语言：javascript复制

<!DOCTYPE html>
<html>
<head>
    <title>Canvas图片处理演示</title>
</head>
<body>
    <!-- 用于输入本地文件和远程URL -->
    <input type="file" id="input-upload" accept=".jpg,.jpeg,.png,.gif,.svg" placeholder="上传本地图片" />
    <input type="text" id="input-url" placeholder="输入图片URL"></input>
    <!-- 图片处理前后展示 -->
    <p>原图：</p>
    <div class="img-container"><img id="input-img"></div>
    <p>画布：</p>
    <div class="img-container">
        <canvas id="my-canvas"></canvas>
    </div>
    <a href="void(0);" id="download">点我下载</a>
</body>
</html>

样式主要是为了增加图片背景文理，用于显示透明度

代码语言：javascript复制

#input-img {
    max-width: 400px;
}

#input-upload {
    width: 200px;
}
/* 图片背景纹理 */
.img-container {
    font-size: 0;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #ccc), color-stop(.25, transparent), to(transparent)),-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #ccc), color-stop(.25, transparent), to(transparent)),-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #ccc)),-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #ccc));
    background-size: 10px 10px;
}

.err {
    border: 1px solid red;
}

2 读取图片资源

一般来讲，我们的图片来源有两种。一是设计给你的本地资源；二是线上资源，可以通过URL进行访问的。

代码语言：javascript复制

// 我们使用两个输入框来引入本地资源和线上资源
const oUpload = document.getElementById('input-upload');
const oInput = document.getElementById('input-url');
// 除此之外还需要一个img标签来加载数据和进行展示
const oImg = document.getElementById('input-img');

// 注: 加载图片的img标签不一定需要放到页面上

基本思路就是利用FileReader读取本地文件，并使用img标签加载数据

代码语言：javascript复制

oUpload.onchange = loadFile;
oInput.onchange = loadUrl;

// 读取本地文件
function loadFile(e) {
    const file = e.target.files[0];
    const reader = new FileReader();
    reader.onload = onFileLoad;
    reader.readAsDataURL(file);
}

// 读取输入URL
function loadUrl(e) {
    oInput.classList.remove('err')
    const url = e.target.value;
    onFileLoad(url);
}

// 加载图片数据
function onFileLoad(src) {
    oImg.onload = function() {
        onImageLoad(oImg)// 这里使用图像数据，后续讲解
    };
    oImg.onerror = onImageErr;
    oImg.src = (src.target ? src.target.result : src);
}

function onImageErr() {
    oInput.classList.add('err');
}

3 canvas 输入输出图像

图像数据有了，那我们就可以开始使用canvas作为载体对图片资源进行处理了。这之前呢我们需要的是从图像到canvas的相互转换，其实就是把图像绘制到画布上，并从画布在上导出图像数据的过程。

这一过程利用了canvas一系列的API先单独拎来说明一下：

canvas - HTML元素

getContext 获得渲染上下文和它的绘画功能
toDataURL 返回一个包含被类型参数规定的图像表现格式的数据链接

context - 通过getContext获取的渲染上下文

drawImage 将图片绘制到画布上
getImageData 获得一个包含画布场景像素数据的ImageData对像
putImageData 像素数据的写入

代码语言：javascript复制

// canvas实例
const oCanvas = document.getElementById('my-canvas');
// 上面读取资源的操作后，将图像画到canvas上
function onImageLoad(img) {
    const width = oCanvas.width = img.naturalWidth || img.width;
    const height = oCanvas.height = img.naturalHeight || img.height;
    const ctx = oCanvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // 获取画布像素信息
    const imageData = ctx.getImageData(0, 0, width, height);

    // 一个像素点由RGBA四个值组成，data为[R,G,B,A [,R,G,B,A[...]]]组成的一维数组
    // 可以通过修改该数组的数据，达到修改图片内容的目的
    const data = imageData.data;
    filter(data);// 这里对图像数据进行处理

    // 把新的内容画进画布里
    ctx.putImageData(imageData, 0, 0);
}

代码语言：javascript复制

// 一个A标签，让用户点击用的
const oDownload = document.getElementById('download');
// 从画布上读取数据并保存到本地
function setDownLoad(fileName) {
    const url  = oCanvas.toDataURL();
    oDownload.setAttribute('href', url);
    oDownload.setAttribute('target', '_blank');

    if (fileName) {
        oDownload.setAttribute('download', fileName);
    }
}

4 数据处理

以简单的抠图效果为例，那我们实际上要做的事情就是设置像素数据RGBA中的A的值：

代码语言：javascript复制

function filter(data) {
    for (let i = 0; i < data.length; i  = 4) {
        let r = data[i],
            g = data[i   1],
            b = data[i   2];

        // 色值在250-256之间都认为是白色
        if ([r, g, b].every(v => v < 256 && v > 250)) {
            data[i   3] = 0; // 把白色改成透明的  
        }
    }
}

效果：

原图

导出图