我正在尝试 (1) 通过 Canvas 生成图像，(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>
关于javascript - 通过 AJAX 将 Canvas 标签生成的图像发送到 CFDOCUMENT，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23794556/