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

我试图使用jsPDF-lib将图像添加到PDF文件。该PDF创建，但图像被损坏，看起来像这样：使用jsPDF/HTML5插入图像在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>

任何想法！？将感谢每一个帮助！

来源

2013-07-29 Daniel Rausch

所以...你可以发布链接到原始图像？ –

-1

变化DATAURL_HERE为画布URL图像，则可以使用该功能计算：

变种imgData = canvas.toDataURL（ '图像/ PNG'）;

来源

2017-07-10 18:09:04 seojedaperez

请考虑修改您在此问题中发布的代码示例。就目前而言，它的格式和范围使我们很难帮助你;这里是一个[很好的资源]（http://stackoverflow.com/help/mcve）让你开始。 -1，不要采取错误的方式。投票是我们在这里指出内容问题的方式;改进您的格式和代码示例，我（或某人）很乐意恢复它。祝你的代码好运！ – herrbischoff

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

回答

相关问题