javascript canvas 清除图片空白多余的方法详解编程语言

 function clearblankimg(imgData){ 
     
        var img = new Image(); //创建图片对象 
        img.src = imgData; 
        img.onload = function() { 
            var c = document.createElement('canvas'); //创建处理画布对象 
            var ctx = c.getContext('2d'); 
            c.width = img.width; 
            c.height = img.height; 
            ctx.drawImage(img, 0, 0); //绘制 
            var imgData = ctx.getImageData(0, 0, c.width, c.height).data; //读取图片数据 
            var lOffset = c.width, 
                rOffset = 0, 
                tOffset = c.height, 
                bOffset = 0; 
            for (var i = 0; i < c.width; i++) { 
                for (var j = 0; j < c.height; j++) { 
                    var pos = (i + c.width * j) * 4 
                    if (imgData[pos] == 255 || imgData[pos + 1] == 255 || imgData[pos + 2] == 255 || imgData[pos + 3] == 255) { 
                        bOffset = Math.max(j, bOffset); // 找到有色彩的最下端 
                        rOffset = Math.max(i, rOffset); // 找到有色彩的最右端 
                        tOffset = Math.min(j, tOffset); // 找到有色彩的最上端 
                        lOffset = Math.min(i, lOffset); // 找到有色彩的最左端 
                    } 
                } 
            } 
            lOffset++; 
            rOffset++; 
            tOffset++; 
            bOffset++; 
            var x = document.createElement("canvas"); //创建处理后画布对象 
            x.width = rOffset - lOffset; 
            x.height = bOffset - tOffset; 
            var xx = x.getContext("2d"); 
            xx.drawImage(img, lOffset, tOffset, x.width, x.height, 0, 0, x.width, x.height); //绘制 
 
            console.log(x.toDataURL()); //得到最终裁剪出来的base64 
 
        } 
 
    }

javascript canvas 清除图片空白多余的方法

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/18754.html

(0)
上一篇 2021年7月19日
下一篇 2021年7月19日

相关推荐

发表回复

登录后才能评论