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 清除圖片空白多余的方法


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM