使用 jsPDF / HTML5 在 PDF 中插入图像不起作用
Posted
技术标签:
【中文标题】使用 jsPDF / HTML5 在 PDF 中插入图像不起作用【英文标题】：Insert Image in PDF with jsPDF / HTML5 doesn't work 【发布时间】：2013-07-29 07:55:59 【问题描述】：我正在尝试使用 jsPDF-lib 将图像添加到 PDF 文件。 PDF 已创建，但图像已损坏，如下所示：
我在我的代码中使用了相同的数据 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>
有什么想法！？将不胜感激每一个帮助！
【问题讨论】：
那么...你可以发布原始图片的链接吗？ 【参考方案1】：改变DATAURL_HERE为Canvas URL Image，你可以用这个函数计算：
var imgData = canvas.toDataURL('image/png');
【讨论】：
请考虑修改您在此问题中发布的代码示例。就目前而言，它的格式和范围使我们很难为您提供帮助；这是一个great resource，可以帮助您开始。 -1，不要走错路。否决票是我们在这里指出内容问题的方式；改进您的格式和代码示例，我（或有人会）很乐意将其还原。祝你的代码好运！以上是关于使用 jsPDF / HTML5 在 PDF 中插入图像不起作用的主要内容，如果未能解决你的问题，请参考以下文章