CANVAS绘图和toDataURL（）

Question

我试图在我的ColdFusion应用程序中实现this signature pad plugin。但是，我正在努力研究如何使用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来创建一个真实的图像，对吗？或者有没有一种方法可以做到这一点？

她有人能告诉我们这个过程应该如何工作吗？

============================================== ============= UPDATE：工作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" />