个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 10:57:27 24 4
gpt4 key购买 nike

我正在尝试使用 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/

24 4 0
文章推荐： css - 如何在 ANT 任务中将 SASS 文件转换为 CSS 文件？
文章推荐： css - 如何强制浏览器添加填充等尺寸？
文章推荐： jquery - 如何在 jQuery 中显示子菜单？
文章推荐： jquery .css ('text-decoration' ) 对 parent 不起作用
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com