javascript - CANVAS 绘图和 toDataURL()

Question

我正在尝试实现this signature pad plugin进入我的 ColdFusion 应用程序。但是，我正在努力弄清楚如何使用 todataURL() 函数将 Canvas 绘图设置为 ColdFusion 变量。

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

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

这是我的带有 Canvas 元素的表单:

<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" />