CANVAS绘图和toDataURL（）

Question

I am trying to implement this signature pad plugin into my ColdFusion application. However, I am struggling on figuring out how to set my canvas drawing to a ColdFusion variable using the todataURL() funtion.

From what I can tell, the JS plugin has a toDataURL() function that converts the image into a base64 string. My JS knowledge is lacking and I cannot wrap my head around how I can set a ColdFusion form variable to this base64 string to use on my action page.

What I believe would work in this scenario is to grab the base64 image on my action page, using the built-in toDataURL() . Then convert it to an actual image and save it using ColdFusion's ImageReadBase64() function.

Here is my form with my canvas element:

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

Here is my attempt to set my hidden form field to the base64 image:

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

In the example code on Github, they have the form submit button outputting the drawing to a new browser window using the following javascript:

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

I think I should be able to use this similar JS code to set a hidden form variable to signaturePad.toDataURL() and then use CFIMAGE and ImageReadBase64 on my action page to create an actual image from that, correct? Or is there a batter way to do this?

Can anyone she some light on how this process should work?

=========================================================== UPDATE: Working JS Code:

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

Here is my working ActionPage code:

<!---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

You have the right basic idea.

function canvasToString(canvas) {

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

    return dataString;
}

Then set a hidden field like so:

function convertSignature() {

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

See this js fiddle .

On the CF side, you can do something like this to decode it and save it into a file:

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