扫描像素点法获取图形轮廓

参考:

http://runjs.cn/code/k09vtlq7

 var _getContourData = function(contourData,canvas){
        var w = canvas.width;
        var h = canvas.height;
        _draft = canvas.getContext('2d').createImageData(w, h);
        var pixelsData = contourData;
        var pixels = pixelsData.data;


        //遍历像素并标记
        for (var r = 0; r < h - 1; r++) {
            for (var c = 0; c < w - 1; c++) {
                var rIndexCurrent = 4 * (c + r * w);
                var gIndexCurrent = 4 * (c + r * w) + 1;
                var bIndexCurrent = 4 * (c + r * w) + 2;
                var aIndexCurrent = 4 * (c + r * w) + 3;

                var rIndexRight = 4 * (c + 1 + r * w);
                var gIndexRight = 4 * (c + 1 + r * w) + 1;
                var bIndexRight = 4 * (c + 1 + r * w) + 2;
                var aIndexRight = 4 * (c + 1 + r * w) + 3;

                var rIndexDown = 4 * (c + (r + 1) * w);
                var gIndexDown = 4 * (c + (r + 1) * w) + 1;
                var bIndexDown = 4 * (c + (r + 1) * w) + 2;
                var aIndexDown = 4 * (c + (r + 1) * w) + 3;

                var currentPixel = new pixel(pixels[rIndexCurrent], pixels[gIndexCurrent], pixels[bIndexCurrent], pixels[aIndexCurrent]);
                var rightPixel = new pixel(pixels[rIndexRight], pixels[gIndexRight], pixels[bIndexRight], pixels[aIndexRight]);
                var downPixel = new pixel(pixels[rIndexDown], pixels[gIndexDown], pixels[bIndexDown], pixels[aIndexDown]);

                var horizonDis = distance(currentPixel, rightPixel);
                var verticalDis = distance(currentPixel, downPixel);

                if (horizonDis >= 200 || verticalDis >= 200) {

                    _draft.data[rIndexCurrent] = 255;
                    _draft.data[gIndexCurrent] = 0;
                    _draft.data[bIndexCurrent] = 0;
                    _draft.data[aIndexCurrent] = 255;

                } else {
                    _draft.data[rIndexCurrent] = 0;
                    _draft.data[gIndexCurrent] = 0;
                    _draft.data[bIndexCurrent] = 0;
                    _draft.data[aIndexCurrent] = 0;
                }

            }
        }

        //计算距离
        function distance(pa, pb) {
            var sum = 0;
            sum += Math.abs(Number(pa.r) - Number(pb.r));
            sum += Math.abs(Number(pa.g) - Number(pb.g));
            sum += Math.abs(Number(pa.b) - Number(pb.b));
            var sum =  Math.abs(Number(pa.a)-Number(pb.a));
            return sum;
        }

        //自定义像素对象
        function pixel(red, green, blue, aval) {
            this.r = red;
            this.g = green;
            this.b = blue;
            this.a = aval;
        }
    }


  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值