在签名板下载的图像上修剪画布周围的空白区域

Question

我已经在我的网站上实现了签名 pad.js。我想修剪绘制签名周围的空白。我现在正在修剪画布周围的透明未使用区域。我尝试将画布背景设为白色。那么这段代码没有检测到绘制的点边界。

但是，我需要将背景设为白色

这是我现在得到的：-

(签名)

====>

(修剪后)

我正在使用下面的代码来修剪签名周围的透明背景：

function trimCanvas(c) {
    var ctx = c.getContext('2d'),
        copy = document.createElement('canvas').getContext('2d'),
        pixels = ctx.getImageData(0, 0, c.width, c.height),
        l = pixels.data.length,
        i,
        bound = {
            top: null,
            left: null,
            right: null,
            bottom: null
        },
        x, y;

    // Iterate over every pixel to find the highest
    // and where it ends on every axis ()
    for (i = 0; i < l; i += 4) {
        if (pixels.data[i + 3] !== 0) {
            x = (i / 4) % c.width;
            y = ~~((i / 4) / c.width);

            if (bound.top === null) {
                bound.top = y;
            }

            if (bound.left === null) {
                bound.left = x;
            } else if (x < bound.left) {
                bound.left = x;
            }

            if (bound.right === null) {
                bound.right = x;
            } else if (bound.right < x) {
                bound.right = x;
            }

            if (bound.bottom === null) {
                bound.bottom = y;
            } else if (bound.bottom < y) {
                bound.bottom = y;
            }
        }
    }

    // Calculate the height and width of the content
    var trimHeight = bound.bottom - bound.top,
        trimWidth = bound.right - bound.left,
        trimmed = ctx.getImageData(bound.left, bound.top, trimWidth, trimHeight);

    copy.canvas.width = trimWidth;
    copy.canvas.height = trimHeight;
    copy.putImageData(trimmed, 0, 0);

    // Return trimmed canvas
    return copy.canvas;
}

Answer 1

我通过实现以下函数解决了它。

SignaturePad.prototype.removeBlanks = function () {
    var imgWidth = this._ctx.canvas.width;
    var imgHeight = this._ctx.canvas.height;
    var imageData = this._ctx.getImageData(0, 0, imgWidth, imgHeight),
    data = imageData.data,
    getAlpha = function(x, y) {
        return {
                        red:   data[(imgWidth*y + x) * 4],
                        green: data[(imgWidth*y + x) * 4 + 1],
                        blue:  data[(imgWidth*y + x) * 4 + 2]
                      };
    },
    isWhite = function (rgb) {
                      return rgb.red == 255 && rgb.green == 255 && rgb.blue == 255;
                    },
    scanY = function (fromTop) {
                      var offset = fromTop ? 1 : -1;

                      // loop through each row
                      for(var y = fromTop ? 0 : imgHeight - 1; fromTop ? (y < imgHeight) : (y > -1); y += offset) {

                        // loop through each column
                        for(var x = 0; x < imgWidth; x++) {
                            if (!isWhite(getAlpha(x, y))) {
                                return y;                        
                            }      
                        }
                    }
                    return null; // all image is white
                },
            scanX = function (fromLeft) {
                      var offset = fromLeft? 1 : -1;

                      // loop through each column
                      for(var x = fromLeft ? 0 : imgWidth - 1; fromLeft ? (x < imgWidth) : (x > -1); x += offset) {

                        // loop through each row
                        for(var y = 0; y < imgHeight; y++) {
                            if (!isWhite(getAlpha(x, y))) {
                                return x;                        
                            }      
                        }
                    }
                    return null; // all image is white
                };

    var cropTop = scanY(false),
    cropBottom = scanY(true),
    cropLeft = scanX(true),
    cropRight = scanX(false);

    cropTop+=30;
    cropRight+=20;

    var relevantData = this._ctx.getImageData(cropLeft-10, cropTop-20, cropRight-cropLeft, cropBottom-cropTop);
    this._ctx.canvas.width = cropRight-cropLeft;
    this._ctx.canvas.height = cropBottom-cropTop;
    this._ctx.clearRect(0, 0, cropRight-cropLeft, cropBottom-cropTop);
    this._ctx.putImageData(relevantData, 0, 0);
};

我使用打击代码来调用函数

signaturePad.removeBlanks();
var dataURL = signaturePad.toDataURL('image/png');