试衣间功能抠图总结

这里没有具体的代码。只是谈一下自己曾经接触的一个试衣间上传图片，利用连通域算法自动抠图的一个功能。
抠图功能的实现：

    抠图的功能实现是结合Jcrop插件、canvas、连通域算法结合实现。Jcrop插件是帮助获取截图上传图片的位置信息，canvas是帮助进行图片的压缩和获取图片颜色信息，连通域算法是计算出需要去掉背景的区域。
    当操作者上传好图片时， 利用FileReader()将上传的图片进行base64化。如果上传的图片比较大，在此处可以针对图片压缩(根据需求而定)，以便进行过多不必要的连通域计算。设定最大宽和最大高利用图片原始宽高比对图片进行压缩。压缩后的新宽高即为canvas宽高，然后将图片的base64图片信息画在canva上，获取到压缩后的base64信息(图片显示地址)，展示在截图区域中。
    此时就可以调用Jcrop插件。等待确定截图区域。
    当用操作者使用抠图功能时:
        1.将压缩后的图片继续画在canvas上。ctx.getImageData(0, 0, with, height)这是获取图片的颜色信息：一个像素点由RGBA四个值组成，data为[R,G,B,A [,R,G,B,A[...]]]组成的一维数组。
        2.根据图片的宽高创建一个空的二维数组。data[宽的下标][高的下标]获得数值对应图片第几列第几行的像素值，并将数组内的值都为0.
        3.接下来就可以利用连通域的算法，去填写这个这个二维数组。(每个连通域按照从1累加的数值编号)
        4.遍历这个已经填写好的连通域编号的二维数组，如果当前连通域编号等于这个图片四个角位置的连通域编号。就将该像素点的信息A值改为0。
        5.此时的图片信息就是去掉背景的图片。
        6.利用此时的连通域编号出现的位置可以求出，去除背景后的图片区域位置。再去给Jcrop传去初始位置和宽高。即可自动选取图片的截取位置。
        7.利用canvas获取去除背景后的图片信息。得出一个去除背景后的base64地址。
        8.再按照宽高比显示出页面需要显示的图片大小。