Question

我试图去除签名周围的空白，我发现了一段代码，可以帮助我做到这一点；但是，我不知道如何使用它。

'signature_pad'是可帮助您绘制签名的JS库。

Here（用户efc发布的第一条评论）是我找到的代码段。

Here（jsfiddle）是我尝试使用该代码的方法，但是每当我单击“另存为PNG”按钮时，都会出现以下错误：

signaturePad.toDataURL（...）。removeBlanks不是函数

完整代码：

"Log.d("String format:",String.format("%.2f", balancePayment)); 
D/String format:: 22.00

var canvas = document.getElementById('signature-pad');

// Adjust canvas coordinate space taking into account pixel ratio,
// to make it look crisp on mobile devices.
// This also causes canvas to be cleared.
function resizeCanvas() {
    // When zoomed out to less than 100%, for some very strange reason,
    // some browsers report devicePixelRatio as less than 1
    // and only part of the canvas is cleared then.
    var ratio =  Math.max(window.devicePixelRatio || 1, 1);
    canvas.width = canvas.offsetWidth * ratio;
    canvas.height = canvas.offsetHeight * ratio;
    canvas.getContext("2d").scale(ratio, ratio);
}

window.onresize = resizeCanvas;
resizeCanvas();

var signaturePad = new SignaturePad(canvas, {
  backgroundColor: 'rgb(255, 255, 255)' // necessary for saving image as JPEG; can be removed is only saving as PNG or SVG
});

document.getElementById('save-png').addEventListener('click', function () {
  if (signaturePad.isEmpty()) {
    return alert("Please provide a signature first.");
  }
  
  var data = signaturePad.toDataURL('image/png').removeBlanks();
  console.log(data);
  window.open(data);
});


document.getElementById('clear').addEventListener('click', function () {
  signaturePad.clear();
});


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 data[(imgWidth*y + x) * 4 + 3]
        },
        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 (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 (getAlpha(x, y)) {
                        return x;                        
                    }      
                }
            }
            return null; // all image is white
        };

        var cropTop = scanY(true),
        cropBottom = scanY(false),
        cropLeft = scanX(true),
        cropRight = scanX(false);

        var relevantData = this._ctx.getImageData(cropLeft, cropTop, cropRight-cropLeft, cropBottom-cropTop);
        this._canvas.width = cropRight-cropLeft;
        this._canvas.height = cropBottom-cropTop;
        this._ctx.clearRect(0, 0, cropRight-cropLeft, cropBottom-cropTop);
        this._ctx.putImageData(relevantData, 0, 0);
    };

.wrapper {
  position: relative;
  width: 400px;
  height: 200px;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.signature-pad {
  position: absolute;
  left: 0;
  top: 0;
  width:400px;
  height:200px;
  background-color: white;
}

有人可以向我解释如何使用该功能吗？我想我没有理解这个（原型）部分的含义：

<script src="https://cdn.jsdelivr.net/npm/signature_pad@2.3.2/dist/signature_pad.min.js"></script>

<div class="wrapper">
  <canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
</div>

<button id="save-png">Save as PNG</button>
<button id="clear">Clear</button>

Answer 1

您已经在SignaturePad的prototype属性上添加了该函数，这意味着该函数驻留在该对象上。因此，正确的执行方法是在SignaturePad对象上调用它。即

signaturePad.removeBlanks()

有关原型属性的更多信息，请参见here

但是，从快速浏览source code来看，结构似乎已经改变。

因此您的原型功能代码应类似于：

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 data[(imgWidth*y + x) * 4 + 3]
    },
    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 (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 (getAlpha(x, y)) {
                    return x;                        
                }      
            }
        }
        return null; // all image is white
    };

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

    var relevantData = this._ctx.getImageData(cropLeft, cropTop, 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实例上调用它；

signaturePad.removeBlanks();

最后得到数据；

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

请注意，我只编译了代码。未经测试

删除使用'signature_pad'生成的签名周围的空白/空白

1 个答案: