Javascript 删除使用'生成的签名周围的空格/空白；签名板'；
我试图删除签名周围的空白，我发现了一段代码，这可以帮助我做到这一点；然而，我不知道如何使用它 是帮助您绘制签名的JS库 （用户efc发布的第一条评论）是我找到的代码段 （jsfiddle）是我试图使用该代码的方式，但每当我单击“另存为PNG”按钮时，就会出现以下错误： signaturePad.toDataURL（…）.removeBlanks不是函数 完整代码：Javascript 删除使用'生成的签名周围的空格/空白；签名板'；,javascript,Javascript,我试图删除签名周围的空白，我发现了一段代码，这可以帮助我做到这一点；然而，我不知道如何使用它 是帮助您绘制签名的JS库 （用户efc发布的第一条评论）是我找到的代码段 （jsfiddle）是我试图使用该代码的方式，但每当我单击“另存为PNG”按钮时，就会出现以下错误： signaturePad.toDataURL（…）.removeBlanks不是函数 完整代码： var canvas=document.getElementById（'signature-pad'）； //根据像素比例调整画布
var canvas=document.getElementById（'signature-pad'）；
//根据像素比例调整画布坐标空间，
//使其在移动设备上看起来清晰。
//这也会导致画布被清除。
函数resizeCanvas（）{
//当缩小到100%以下时，出于某种非常奇怪的原因，
//有些浏览器报告devicePixelRatio小于1
//然后只清除画布的一部分。
var比率=数学最大值（window.devicePixelRatio | | | 1，1）；
canvas.width=canvas.offsetWidth*比率；
canvas.height=canvas.offsetHeight*比率；
canvas.getContext（“2d”）.scale（比率，比率）；
}
window.onresize=调整画布大小；
调整画布的大小（）；
var signaturePad=新的signaturePad（画布{
backgroundColor:'rgb（255，255，255）//将图像保存为JPEG所必需；仅保存为PNG或SVG时才能删除
});
document.getElementById（'save-png'）。addEventListener（'click'，function（）{
if（signaturePad.isEmpty（））{
返回警报（“请先提供签名”）；
}
var data=signaturePad.toDataURL（'image/png'）.removeBlanks（）；
控制台日志（数据）；
窗口。打开（数据）；
});
document.getElementById（'clear'）.addEventListener（'click'，函数（）{
signaturePad.clear（）；
});
SignaturePad.prototype.removeBlanks=函数（）{
var imgWidth=this.\u ctx.canvas.width；
var imgHeight=此。_ctx.canvas.height；
var imageData=此._ctx.getImageData（0,0，imgWidth，imgHeight），
data=imageData.data，
getAlpha=函数（x，y）{
返回数据[（imgWidth*y+x）*4+3]
},
scanY=功能（从顶部）{
var偏移=从顶部开始？1:-1；
//循环遍历每一行
对于（变量y=fromTop？0:imgHeight-1；fromTop？（y-1）；y+=offset）{
//循环遍历每一列
对于（var x=0；x-1）；x+=offset）{
//循环遍历每一行
对于（变量y=0；y
.wrapper{
位置：相对位置；
宽度：400px；
高度：200px；
-moz用户选择：无；
-webkit用户选择：无；
-ms用户选择：无；
用户选择：无；
}
.签名本{
位置：绝对位置；
左：0；
排名：0；
宽度：400px；
高度：200px；
背景色：白色；
}
另存为PNG
清除您已经在SignaturePad
的prototype属性上添加了函数，这意味着它驻留在该对象上。所以正确的执行方法是在SignaturePad
对象上调用它。i、 e
signaturePad.removeBlanks()
可以找到有关prototype属性的更多信息
然而，从快速查看的结果来看，结构似乎已经改变
所以你的原型函数代码应该是这样的
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);
};
最后得到数据
var data = signaturePad.toDataURL('image/png');
请注意，我只编译了代码。未测试您已在SignaturePad
的prototype属性上添加了函数，这意味着它驻留在该对象上。所以正确的执行方法是在SignaturePad
对象上调用它。i、 e
signaturePad.removeBlanks()
可以找到有关prototype属性的更多信息
然而，从快速查看的结果来看，结构似乎已经改变
所以你的原型函数代码应该是这样的
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);
};
最后得到数据
var data = signaturePad.toDataURL('image/png');
请注意，我只编译了代码。未测试关于原型
：这会向SignaturePad
类添加一个方法，因此您需要在该类的实例上调用它，而不是在将对象转换为完全不同的对象（数据URI）之后调用它-SignaturePad.removeBlanks（）
。由于这个方法似乎并没有返回对象本身，所以不能在这里使用方法链接。所以你需要单独调用toDataURL
。@04FS谢谢你的帮助，但我不确定我是否能得到你…你能在代码中显示它吗？signaturePad.removeBlanks（）；var data=signaturePad.toDataURL（'image/png'）@04FS现在，它给出了一个错误：>无法设置未定义的属性“宽度”。在这一行：this.\u canvas.width=cropRight-cropLeft关于原型
：这将向签名Pad
clas添加一个方法