javascript - 使用 jsPDF/HTML5 在 PDF 中插入图像不起作用

标签 javascript jquery cordova jspdf

我正在尝试使用 jsPDF-lib 将图像添加到 PDF 文件中。 PDF 已创建,但图像已损坏,如下所示:

enter image description here

我在代码中使用相同的数据 URL,如下例所示:http://parall.ax/products/jspdf 我的完整代码附在下面:

    <!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html>
    <head>
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
                <!-- Scripts down here -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="jspdf.js"></script>
        <script type="text/javascript" src="jspdf.plugin.addimage.js"></script>
        <title>Hello World</title>
    </head>
    <body>
        <script type="text/javascript" src="cordova-2.7.0.js"></script>
        <script type="text/javascript">
        var doc;

        function clicked()  {
            doc = new jsPDF();
            var imgData = 'data:image/jpeg;base64, ***DATAURL_HERE***';
            doc.setFontSize(40);
            doc.text(35, 25, "Test-PDF");
            doc.addImage(imgData, 'JPEG', 15, 40, 180, 180);
            writeFile();
            alert("File was written");
            }

        function writeFile() {
            window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, onFSSuccess, onError);
        }

        function onFSSuccess(fs) {
            fileSystem = fs;
            createRoot();            
        }

        function createRoot(e) {
            fileSystem.root.getDirectory("Download/", {create: true}, createFile);
        }

        function createFile(dirEntry) {
            var dir = "Test.pdf";
            dirEntry.getFile(dir, {create: true, exclusive: true}, saveFileToRoot);
        }

        function saveFileToRoot(f) {
            f.createWriter(function(writerOb) {
                writerOb.write(doc.output());
            });
        }

        function onError(e) {
        }

        </script>
    <h1>Testfile working</h1>
    <button onclick="clicked()">Clickme</button>
    </body>
</html>

有什么想法吗?将不胜感激每一个帮助!

最佳答案

更改Canvas URL图像的DATAURL_HERE,您可以使用此函数进行计算:

var imgData = canvas.toDataURL('image/png');

关于javascript - 使用 jsPDF/HTML5 在 PDF 中插入图像不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17918707/

相关文章:

javascript - applyBindingsToNode 与 observable

javascript - 一张 Angular ng-map 中的标记重新出现在错误的 View 中

javascript - 如何监控javascript改变的HTML输入值

jquery - Bootstrap 表单设计间距问题

javascript - 有没有通用的方法来指定 jquery 中的元素

javascript - Phonegap Android screen.height 和 screen.width 返回黑色系统栏空间

javascript - 如何在 Phonegap 中启用前置摄像头

android - Phonegap Android 启动画面不显示

javascript - 如何将 JavaScript 倒计时与服务器时间同步

javascript - 在 jquery 中禁用此按钮