Javascript 具有多个工作签名面板

我有一张表格需要三个人签字。我最初把它设置为由一个人签名，但发现我需要三个人。我不能让这三个人都工作

帆布容器：

<div class="rowElem">
    <div id="container2">
    </div>
</div> 
<div class="rowElem">
    <div id="container3">
    </div>
</div>
<div class="rowElem">
    <div id="container4">
    </div>
</div> 

Javascript:

<script>


       (function (ns) {
    "use strict";

    ns.SignatureControl = function (options) {
        var containerId = options && options.canvasId || "container2",
            callback = options && options.callback || {},
            label = options && options.label || "Teacher Signature",
            cWidth = options && options.width || "300px",
            cHeight = options && options.height || "300px",
            btnClearId,
            canvas,
            ctx;

        function initCotnrol() {
            createControlElements();
            wireButtonEvents();
            canvas = _("signatureCanvas");
            canvas.addEventListener("mousedown", pointerDown, false);
            canvas.addEventListener("mouseup", pointerUp, false);
            ctx = canvas.getContext("2d");            
        }

        function createControlElements() {            
            var signatureArea = document.createElement("div"),
                labelDiv = document.createElement("div"),
                canvasDiv = document.createElement("div"),
                canvasElement = document.createElement("canvas"),
                buttonsContainer = document.createElement("div"),
                buttonClear = document.createElement("button");

            labelDiv.className = "signatureLabel";
            labelDiv.textContent = label;

            canvasElement.id = "signatureCanvas";
            canvasElement.clientWidth = cWidth;
            canvasElement.clientHeight = cHeight;
            canvasElement.style.border = "solid 2px black";
            canvasElement.style.background = "white";

            buttonClear.id = "btnClear";
            buttonClear.textContent = "Clear Signature Panel";

            canvasDiv.appendChild(canvasElement);
            buttonsContainer.appendChild(buttonClear);

            signatureArea.className = "signatureArea";
            signatureArea.appendChild(labelDiv);
            signatureArea.appendChild(canvasDiv);
            signatureArea.appendChild(buttonsContainer);

            _(containerId).appendChild(signatureArea);
        }

        function pointerDown(evt) {
            ctx.beginPath();
            ctx.moveTo(evt.offsetX, evt.offsetY);
            canvas.addEventListener("mousemove", paint, false);
        }

        function pointerUp(evt) {
            canvas.removeEventListener("mousemove", paint);
            paint(evt);
        }

        function paint(evt) {
            ctx.lineTo(evt.offsetX, evt.offsetY);
            ctx.stroke();
        }

        function wireButtonEvents() {
            var btnClear = _("btnClear");
            btnClear.addEventListener("click", function () {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
            }, false);
        }

        function getSignatureImage() {
            return ctx.getImageData(0, 0, canvas.width, canvas.height).data;
        }

        return {
            init: initCotnrol,
            getSignatureImage: getSignatureImage
        };
    }
})(this.ns = this.ns || {});

（功能（ns）{
“严格使用”；
ns.SignatureControl=功能（选项）{
var containerId=options&&options.canvasId | |“container2”，
callback=options&&options.callback |{}，
label=options&&options.label | |“教师签名”，
cWidth=options&&options.width | |“300px”，
cHeight=options&&options.height | |“300px”，
btnClearId，
帆布，
ctx；
函数initCotnrol（）{
createControlElements（）；
wireButtonEvents（）；
画布=uu（“签名画布”）；
canvas.addEventListener（“mousedown”，pointerDown，false）；
canvas.addEventListener（“mouseup”，pointerUp，false）；
ctx=canvas.getContext（“2d”）；
}
函数createControlElements（）{
var signatureArea=document.createElement（“div”），
labelDiv=document.createElement（“div”），
canvasDiv=document.createElement（“div”），
canvasElement=document.createElement（“画布”），
buttonsContainer=document.createElement（“div”），
buttonClear=document.createElement（“按钮”）；
labelDiv.className=“signatureLabel”；
labelDiv.textContent=标签；
canvasElement.id=“signatureCanvas”；
canvasElement.clientWidth=cWidth；
canvasElement.clientHeight=cHeight；
canvasElement.style.border=“纯色2px黑色”；
canvasElement.style.background=“白色”；
buttonClear.id=“btnClear”；
buttonClear.textContent=“清除签名面板”；
canvasDiv.appendChild（canvasElement）；
buttonsContainer.appendChild（buttonClear）；
signatureArea.className=“signatureArea”；
附属品签名（labelDiv）；
附录儿童签名（画布）；
签名ea.appendChild（按钮容器）；
_（集装箱）附件（签名a）；
}
函数指针下降（evt）{
ctx.beginPath（）；
ctx.moveTo（evt.offsetX，evt.offsetY）；
canvas.addEventListener（“mousemove”，绘画，假）；
}
函数指针up（evt）{
canvas.removeEventListener（“mousemove”，paint）；
油漆（evt）；
}
功能涂料（evt）{
ctx.lineTo（evt.offsetX，evt.offsetY）；
ctx.stroke（）；
}
函数wireButtonEvents（）{
var btnClear=uu（“btnClear”）；
addEventListener（“单击”，函数（）{
clearRect（0，0，canvas.width，canvas.height）；
}，假）；
}
函数getSignatureImage（）{
返回ctx.getImageData（0，0，canvas.width，canvas.height）.data；
}
返回{
init:initCotnrol，
getSignatureImage:getSignatureImage
};
}
})（this.ns=this.ns |{}）；

这是启动器脚本：

    function teacherSig() {
            var signature = new ns.SignatureControl({ containerId: 'container2', callback: function () {
                } 
            });
            signature.init();
            _('btnClear').className = "greyishBtn";
        }

        window.addEventListener('DOMContentLoaded', teacherSig, false);
</script>

function teacherSig（）{
var signature=new ns.SignatureControl（{containerId:'container2'，回调：函数（）{
} 
});
signature.init（）；
_（'btnClear'）.className=“greyishBtn”；
}
addEventListener（'DOMContentLoaded'，teacherSig，false）；

“u”是document.getElementById的另一个文件中的变量集-我已经知道它是有效的，我正在所有js文件中使用它

我尝试复制启动器脚本并更改函数名/元素名，但没有任何效果

任何帮助都将不胜感激

---

如果有人知道更好的方法，我也可以试试。我在这个项目上的时间快用完了，这是客户最后加上去的。如果有人知道另一个解决方案，一个插件或其他多个解决方案，我也愿意接受。

当你要求更好的解决方法时，我建议你使用这个解决方案，它可以设置大多数非琐碎的事情，但允许你像往常一样使用上下文和画布

对于三个签名框，您只需执行以下操作（保留原始HTML代码，如本文所示）：

/// setup three canvases referencing parent Id and setting size:
var ez1 = new easyCanvas('container2', 350, 100),
    ez2 = new easyCanvas('container3', 350, 100),
    ez3 = new easyCanvas('container4', 350, 100);

/// common handler when mouse is held down, this = current easyCanvas instance
ez1.onmousemove =  ez2.onmousemove =  ez3.onmousemove = function(x, y) {
    /// instead of this.ctx.moveTo etc.. :
    this.strokeLine(this.prevX, this.prevY, x, y);
}

现在您有三个可以登录的框。

strokeLine

是一个用于绘制线条的简写功能，

prevX/Y

存储在

easyCanvas

实例的内部，

x

和

Y

已经相对于画布进行了更正

（要访问画布，您只需参考

ez.canvas

，对于上下文

ez.ctx

或

ez.context

）

为了演示起见，我在HTML中添加了一些保存按钮，以允许您将画布保存为图像：

save1.addEventListener('click', function(){download(ez1,1)}, false);
save2.addEventListener('click', function(){download(ez2,2)}, false);
save3.addEventListener('click', function(){download(ez3,3)}, false);

function download(ez, index) {
    /// show a save dialog with filename to save image here as png
    ez.download('Signature' + index + '.png');
}

如果您需要内部数据，您可以这样做：

ez.canvas.toDataURL();

而是针对每个实例

更新-例如：在单个保存按钮上执行以下操作：

function saveSignatures() {

    var sig1 = ez1.canvas.toDataURL();
    var sig2 = ez2.canvas.toDataURL();
    var sig3 = ez3.canvas.toDataURL();

    saveByAjax(sig1, sig2, sig3); // some ajax function to save the data
}

---

免责声明：因为JavaScript是我自己制作的，是免费的，并在GPL-3.0下获得许可。

如果我想同时保存所有三个，我已经在使用ajax将图像保存到文件夹中。@Jack只需使用一个按钮，您就可以从每个实例中将图像提取为数据uri（请参阅更新的答案和fiddle）。我的示例中的ajax函数是伪函数，只需使用您已经拥有的函数即可。谢谢！只是为了验证，

var sig1=ez1.canvas.toDataURL（），sig2=ez2.canvas.toDataURL（），sig3=ez3.canvas.toDataURL（）；

捕获签名供我保存，对吗？@Jack这是正确的。但在这种情况下，这些是数据uri的（）.如果你只是