画布绘图与toDataURL()

Question

我正在尝试将这个签名的便携插件实现到ColdFusion应用程序中。但是，我很难弄清楚如何使用ColdFusion函数将画布绘图设置为todataURL()变量。

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

在这个场景中，我认为可以使用内置的base64获取我的操作页面上的toDataURL()图像。然后将其转换为实际的图像，并使用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);
}

见这支小提琴。

在CF方面，您可以这样做来解码它并将其保存到一个文件中：

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