在线抠图网站帮帮铺bbpu.com全面技术解析之canvas应用

• 技术关键词

          Canvas应用,泛洪算法（Flood Fill),图片缩放,相对位置等比缩放,判断一个点是否在一个平面闭合多边形，nginx代理

• 业务关键词

         在线抠图,智能抠图,一键抠图,钢笔抠图,矩阵抠图,图片处理,图片压缩,图片尺寸,图片格式,图片透明度,图片下载

• 引用组件（前端）

         Jquery,Canvas,Jcrop, Layer,MiniColors

• 技术解析背景

          发表这篇随笔，一方面帮助前端的同学认识Canvas的实际应用场景和了解相关技术点，另一方面让帮帮铺 bbpu.com 能够帮助更多的人去快速高效的完成抠图。

• 帮帮铺 bbpu.com背景

         作为一名后端研发去开发一套纯前端的在线抠图工具实际上看起来有些疑惑和怪异，或许是因为 14年5月发表的一个随笔  html5 canvas+js实现ps钢笔抠图 的延续。

         发表在知乎上的一篇文章 能让你知道 bbpu.com上线的原由、目的以及相关功能简介。

         

• 速抠图网站实现原理

          网站几乎没有和后端服务做交互。后端用nginx作为server，另外代理了三方房展的图片访问（解决前端跨域访问网络图片跨域禁止canvas渲染的问题，通过nginx代理访问规避这个问题）。图片上传及图片操作等均在客户端浏览器上完成（图片操作流畅的很），因为有Canvas，所以整个工具网站的核心都在于js的交互及canvas的应用。

• 智能抠图（仿PS魔法棒效果）

         这里参考了一些开源项目和泛洪算法（Flood Fill)的实现案例。对于一次纯色或者背景色差比较大的图片抠图，基本都能实现一键抠图的效果，通过点击滑选闭合色区来实现抠图，但是对于背景色差复杂的图片就很难实现自己想要的抠图了。

         算法参考： 图像分割经典算法--《泛洪算法》（Flood Fill）

         实现原理：底层放图片，顶层放canvas，将图片按照对等尺寸渲染至到画布上得到ImageData,鼠标点击获取ImageData RGB 色值，用floodfill算法得到闭合外围坐标，在顶层canvas渲染边线（ctx.putImageData）

 init: function (img) {
        this.data.img = img;
        this.data.tempCanvas = document.createElement('canvas');
        var tempCtx = this.data.tempCanvas.getContext('2d');
        //切记，原始图像大小
        tempCtx.canvas.width = panel.data.targetImgWidth;
        tempCtx.canvas.height = panel.data.targetImgHeight;
        tempCtx.drawImage(img, 0, 0, panel.data.targetImgWidth, panel.data.targetImgHeight);
        this.data.imgData = tempCtx.getImageData(0, 0, panel.data.targetImgWidth, panel.data.targetImgHeight);
    },

• 钢笔抠图

         钢笔抠图参考 html5 canvas+js实现ps钢笔抠图 

         实现原理：底层放图片，顶层放canvas，鼠标点击坐标存放到array中，canvas根据坐标list画线画点，canvas的 globalCompositeOperation = "destination-out" 属性可以实现通过由多个点构成的闭合区间设置成透明色穿透画布背景色或是背景图片。

• 矩阵抠图

         这里用的是非常实用的Jcrop插件，参考Jcrop官网 ,提供了丰富的api，比如等比、移动等实用的功能。

• 图片等比缩放（很实用）

          解决图片加载要等比缩放到画布中，并且居中显示。

function imgScale(src, w, h, fun) {
    var img = new Image();
    img.src = src;
    img.onload = function () {
        var wi = img.width;
        var he = img.height;
        var toHe = he * w / wi;
        var toWi = 0;
        if (toHe > h) {
            toWi = wi * h / he;
            toHe = h;
        } else {
            toWi = w;
        }
        fun(toWi, toHe);
    };
}

• 相对位置等比缩放

        在实现钢笔抠图或矩阵抠图需要放大，并且钢笔及矩阵坐标list也要等比缩放，需要用到如下算法来实现。

_scale = function (c, a, f) {
    x1 *= c.x;
    y1 *= c.y;
    x2 *= c.x;
    y2 *= c.y;
    if (a) {
        _values = [1.0000000000000002, -0, -0, 1.0000000000000002];
        var b = transform(a.x - translationStart.x, a.y - translationStart.y);
        var d = transform(c.x * -b.x, c.y * -b.y);
        translation.x = d.x + a.x;
        translation.y = d.y + a.y
    }
};

transform = function (b, d, a) {//两中心x差，两中心y差
    var c = new Point(_values[0] * b + _values[1] * d, _values[2] * b + _values[3] * d);
    return c
};

•  Canvas应用

      图片压缩、图片尺寸调整、图片背景色、图片透明度实际均可通过canvas属性来操作

//透明度 
ctx.globalAlpha = imgCreate.cutObj.alpha;
//背景色
ctx.fillStyle = imgCreate.cutObj.color;
//根据坐标list裁剪图片
var ctx = $("#createCanvas")[0].getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 0);
for (var i = 0; i < proxy.cutObj.pointArray.length; i++) {
    ctx.lineTo(proxy.cutObj.pointArray[i].pointx, proxy.cutObj.pointArray[i].pointy);
}
ctx.lineTo(proxy.cutObj.pointArray[0].pointx, proxy.cutObj.pointArray[0].pointy);
ctx.clip();
ctx.drawImage(proxy.cutObj.imgObj, tempPointArray[0].pointx * -1, tempPointArray[0].pointy * -1, proxy.cutObj.width, proxy.cutObj.height);
//生成及下载图片兼容（ie\谷歌\火狐）
var fileName = proxy.cutObj.name + "." + proxy.cutObj.suffix.replace("e", "");
if (window.navigator.msSaveOrOpenBlob) {
    var imgData = $("#createCanvas")[0].msToBlob();
    var blobObj = new Blob([imgData]);
    window.navigator.msSaveOrOpenBlob(blobObj, fileName);
} else {
    var imgData = $("#createCanvas")[0].toDataURL("image/" + imgCreate.cutObj.suffix, parseFloat(imgCreate.cutObj.quality));
    imgData = imgData.replace("image/" + imgCreate.cutObj.suffix, 'image/octet-stream');
    var a = document.createElement('a');
    var event = new MouseEvent('click');
    a.download = fileName;
    a.href = URL.createObjectURL(dataURIToBlob(imgData));
    a.dispatchEvent(event);
}