Question

我尝试（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>

Answer 1

离开这个之后，抓了一下我的头并做了一些研究我已经解决了这个问题！我正在转换基本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>

通过AJAX将Canvas标签生成的图像发送到CFDOCUMENT

1 个答案: