Menu
I'm attempting to (1) generate an image via canvas, (2) convert it to an image file, (3) post that image file via ajax to a cfc and (4) render it in a CFDocument tag. At present I have the first three steps working, but when I render the PDF I get a messy string of data.
Any help would be appreciated. Thanks! I've shared the code below...
The page...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Canvas Image To CFDocument Via toDataURL() and AJAX</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<a href="#" id="makePdfLink">Make PDF</a>, <a href="aPdf.pdf">View PDF</a>
<canvas id="myCanvas"></canvas>
<script>
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
$("#makePdfLink").click(function() {
var canvas = document.getElementById('myCanvas');
var image = new Image();
image.id = 'pic';
image.src = canvas.toDataURL();
var data = new FormData();
data.append('pdfBody',image.src);
$.ajax({
url: 'PDF.cfc?method=make',
data: data,
cache: false,
contentType: false,
dataType: "json",
processData: false,
type: 'POST',
success: function(results){
console.log('success',results);
},
error: function(results){
console.log('error',results);
}
});
});
</script>
</body>
</html>
...and the CFC...
<cfcomponent>
<cffunction name="make" access="remote" returnformat="json" returntype="any" output="true">
<cfscript>
request.acceptExt = 'image/jpeg,image/gif,image/png';
</cfscript>
<cfdocument format="pdf" overwrite="yes" filename="aPdf.pdf" localurl="true">
<cfdocumentitem type="header">the header</cfdocumentitem>
<cfdocumentitem type="footer">the footer</cfdocumentitem>
<cfdocumentsection><cfoutput>#pdfBody#</cfoutput> </cfdocumentsection>
</cfdocument>
<cfreturn SerializeJSON(form) />
</cffunction>
</cfcomponent>
675
After walking away from this one, scratching my head for a bit and doing a bit more research I have solved the problem! I am converting the base 64 string and saving it to the filesystem before drawing it in the PDF. I'm also sharing this solution over at http://www.christophervigliotti.com/2014/05/from-canvas-to-pdf-via-ajax/
<cfcomponent>
<cffunction name="make" access="remote" returnformat="json" returntype="any" output="true">
<cfargument name="pdfBody" type="any" required="true" />
<cfset request.acceptExt = 'image/jpeg,image/gif,image/png' />
<!--- read the base 64 representation of the image --->
<cfset cfImageObject = ImageReadBase64(pdfBody) />
<!--- create a new cf image object --->
<cfimage source="#cfImageObject#" destination="aPng.png" action="write" overwrite="yes">
<cfdocument format="pdf" overwrite="yes" filename="aPdf.pdf" localurl="true">
<cfdocumentitem type="header">the header</cfdocumentitem>
<cfdocumentitem type="footer">the footer</cfdocumentitem>
<cfdocumentsection>
<cfoutput>
<!--- it works! --->
<img src="aPng.png" />
</cfoutput>
</cfdocumentsection>
</cfdocument>
<cfreturn SerializeJSON(form) />
</cffunction>
</cfcomponent>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With