Chr*_*tti 5 javascript ajax coldfusion jquery canvas
我试图(1)通过画布生成图像,(2)将其转换为图像文件,(3)通过ajax将该图像文件发布到cfc,以及(4)将其呈现在CFDocument标记中.目前我有前三个步骤,但是当我渲染PDF时,我得到一堆乱七八糟的数据.
任何帮助,将不胜感激.谢谢!我已经分享了以下代码......
这页纸...
<!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>
......和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>
离开这个之后，我挠了挠头，做了更多的研究，我解决了这个问题！我正在转换 Base 64 字符串并将其保存到文件系统，然后再在 PDF 中绘制它。我还在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>