christophervigliotti/1. index.cfm

## 1. index.cfm
<!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>
			// generate a simple canvas object
			var canvas=document.getElementById('myCanvas');
			var ctx=canvas.getContext('2d');
			ctx.fillStyle='#FF0000';
			ctx.fillRect(0,0,80,100);

			// when the user clicks the makePdfLink
			$("#makePdfLink").click(function() {

				// convert the canvas to an image object
				var canvas = document.getElementById('myCanvas');
				var image = new Image();
				image.id = 'pic';
				image.src = canvas.toDataURL();

				// create a formData object and add the image to it
				var data =  new FormData();
				data.append('pdfBody',image.src);

				// send the formData object to the cfc function via ajax
				$.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>

## 2. PDF.cfc
<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' />

		<cfdocument format="pdf" overwrite="yes" filename="aPdf.pdf" localurl="true">
			<cfdocumentitem type="header">the header</cfdocumentitem>
			<cfdocumentitem type="footer">the footer</cfdocumentitem>

			<!--- problem!  this generates a long string...not an image --->
			<cfdocumentsection><cfoutput>#pdfBody#</cfoutput></cfdocumentsection>

		</cfdocument>
		<cfreturn SerializeJSON(form) />
	</cffunction>
</cfcomponent>

## 3. PDF.cfc
<!--- SOLUTION! --->
<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>
	<!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>
	// generate a simple canvas object
	var canvas=document.getElementById('myCanvas');
	var ctx=canvas.getContext('2d');
	ctx.fillStyle='#FF0000';
	ctx.fillRect(0,0,80,100);

	// when the user clicks the makePdfLink
	$("#makePdfLink").click(function() {

	// convert the canvas to an image object
	var canvas = document.getElementById('myCanvas');
	var image = new Image();
	image.id = 'pic';
	image.src = canvas.toDataURL();

	// create a formData object and add the image to it
	var data = new FormData();
	data.append('pdfBody',image.src);

	// send the formData object to the cfc function via ajax
	$.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>
	<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' />

	<cfdocument format="pdf" overwrite="yes" filename="aPdf.pdf" localurl="true">
	<cfdocumentitem type="header">the header</cfdocumentitem>
	<cfdocumentitem type="footer">the footer</cfdocumentitem>

	<!--- problem! this generates a long string...not an image --->
	<cfdocumentsection><cfoutput>#pdfBody#</cfoutput></cfdocumentsection>

	</cfdocument>
	<cfreturn SerializeJSON(form) />
	</cffunction>
	</cfcomponent>
	<!--- SOLUTION! --->
	<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>