Question

我正在尝试将this signature pad plugin实现到我的ColdFusion应用程序中。但是，我正在努力弄清楚如何使用todataURL()功能将我的画布绘图设置为ColdFusion变量。

据我所知，JS插件有一个toDataURL()函数，可将图像转换为base64字符串。我的JS知识缺乏，我无法理解如何将ColdFusion表单变量设置为在我的操作页面上使用的base64字符串。

我相信在这种情况下可以使用内置的toDataURL()在我的操作页面上获取base64图像。然后将其转换为实际图像并使用ColdFusion ImageReadBase64()函数保存它。

这是我的画布元素的表单：

<form action="signature_action.cfm?  ticketID=#url.ticketID#&TT=#url.TT#&techID=#url.techID#&device=ipad" method="post" NAME="SigForm" id="SigForm">
<div id="body" >
<div id="signature-pad" class="m-signature-pad">
   <div id="format" align="center" style=" padding-bottom: 15px; margin-top:5px;">
      <input class="check1" type="checkbox" id="check1" name="equipment_dropped_off" value="equipment_dropped_off"/>
      <label for="check1"><span class="style1">Equipment Dropped Off &nbsp; &nbsp; </span></label>
      <span class="style1">                                
      <input class="check2" type="checkbox" id="check2" name="work" value="work"/>
      <label for="check2">Work performed &nbsp; &nbsp; </label>
      <input class="check3" id="check3" type="checkbox" name="payment" value="payment" />
      <label for="check3">Payment Recieved &nbsp; &nbsp; </label>
      <input class="check4" name="equipment_picked_up" id="check4" type="checkbox" value="equipment_picked_up" />
      <label for="check4">Equipment Picked Up</label>
      </span><br />
      <input name="tech_name" type="hidden" value="#url.tech_name#">
   </div>
   <div class="m-signature-pad--body">
      <canvas id="canvas"></canvas>
   </div>
   <div class="m-signature-pad--footer">
      <div class="description">Sign above</div>
      <button type="button" class="button clear" data-action="clear">Clear</button>
      <input class="button save" type="submit" id="submit" name="submit" class='btn-style-mobile' value="Click Here To Accept Signature" disabled> 
   </div>
</div>
<script src="../scripts/signature_pad.js"></script>
<script src="../scripts/app.js"></scrip>
</div>   
</form>

这是我尝试将隐藏的表单字段设置为base64图像：

// JavaScript Document
var wrapper = document.getElementById("signature-pad"),
clearButton = wrapper.querySelector("[data-action=clear]"),
saveButton = document.getElementById('submit'),
canvas = wrapper.querySelector("canvas"),
signaturePad;

// 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();

signaturePad = new SignaturePad(canvas);

clearButton.addEventListener("click", function (event) {
   signaturePad.clear();
});

saveButton.addEventListener("click", function (event) {
   if (signaturePad.isEmpty()) {
       alert("Please provide signature first.");
   } else {
       window.open(signaturePad.toDataURL());
       //document.getElementById('base64').value = 'signaturePad.toDataURL()';
   }
});

在Github上的示例代码中，他们使用表单提交按钮，使用以下javascript将绘图输出到新的浏览器窗口：

saveButton.addEventListener("click", function (event) {
   if (signaturePad.isEmpty()) {
       alert("Please provide signature first.");
   } else {
       window.open(signaturePad.toDataURL());
   }
});

我想我应该可以使用这个类似的JS代码将隐藏的表单变量设置为signaturePad.toDataURL()，然后在我的操作页面上使用CFIMAGE和ImageReadBase64来创建一个实际的图像，正确？或者有一种方法可以做到这一点吗？

任何人都可以了解这个过程应该如何运作？

=============================================== ============ 更新：使用JS代码：

    // JavaScript Document
var wrapper = document.getElementById("signature-pad"),
    clearButton = wrapper.querySelector("[data-action=clear]"),
    saveButton = document.getElementById('submit'),
    canvas = wrapper.querySelector("canvas"),
    signaturePad;

// 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();

signaturePad = new SignaturePad(canvas);

clearButton.addEventListener("click", function (event) {
    signaturePad.clear();
});

    saveButton.addEventListener("click", function (event) {
    if (signaturePad.isEmpty()) {
        alert("Please provide signature first.");
    } else {
        //window.open(signaturePad.toDataURL());
        document.getElementById('base64').value = signaturePad.toDataURL();
    }
    });

这是我的工作ActionPage代码：

<!---write image to file and disk --->  
    <cfset imageData = #form.base64#>
    <cfoutput>#form.base64#</cfoutput>
    <cfset myImage = ImageReadBase64("#form.base64#")> 
    <cfimage
    action="write"
    destination="C:\Inetpub\wwwroot\signatures\#fullfilename#.png"
    source="#myImage#"
    overwrite="yes"
    isBase64="yes"
    style="border: 3px dashed ##000000 ;"
    />

Answer 1

你有正确的基本想法。

function canvasToString(canvas) {

    var dataString = canvas.toDataURL("image/png");
    var index = dataString.indexOf( "," )+1;
    dataString = dataString.substring( index );

    return dataString;
}

然后像这样设置隐藏字段：

function convertSignature() {

    var signaturePad = document.getElementById("signaturePad");
    document.getElementById("signaturePng").value = canvasToString(signaturePad);
}

请参阅this js fiddle。

在CF方面，您可以执行类似的操作来对其进行解码并将其保存到文件中：

<cffile action="write" output="#toBinary( form.signaturePng )#" file="signature.png" />

CANVAS绘图和toDataURL（）

1 个答案: