zoukankan      html  css  js  c++  java
  • base64图片裁剪空白区域

    /**
         * 裁剪空白区域
         * @param base64
         * @param callback
         */
        function tailor(base64,callback=null) {
            var img = new Image();//创建图片对象
            img.src = base64;
            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);//绘制
                if (callback){
                    callback(x.toDataURL());
                }
    
            }
        }
  • 相关阅读:
    关于JSONP
    使用stylelint对CSS/Sass做代码审查
    关于input的file框onchange事件触发一次失效的新的解决方法
    HTML5 之 FileReader(图片上传)
    document.domain
    window.hostory(浏览器的历史记录)
    事件DOMContentLoaded和load的区别
    JavaScript中---作用域
    关于repaint(重绘)和reflow( 回流)
    bootstrap兼容性问题
  • 原文地址:https://www.cnblogs.com/Im-Victor/p/13941747.html
Copyright © 2011-2022 走看看