zoukankan      html  css  js  c++  java
  • 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 清除图片空白多余的方法


    如果遇到什么不懂的地方直接关注公众号留言(本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须在文章页面给出原文连接,否则保留追究法律责任的权利。)
    作者:newmiracle
    出处:https://www.cnblogs.com/newmiracle/

     
  • 相关阅读:
    机器学习之——正规方程法
    机器学习之——学习率
    机器学习之梯度下降法
    机器学习之线性回归算法
    集体智慧编程学习笔记——第一讲
    机器学习之归一化和标准化总结
    推荐系统实战-学习笔记第一章
    洛谷P1396 营救 题解
    洛谷P3905 道路重建
    洛谷P2384 最短路 题解
  • 原文地址:https://www.cnblogs.com/newmiracle/p/14348145.html
Copyright © 2011-2022 走看看