我无法在我的画布加载Konva Image对象如果源是一个PDF。
不会引发任何错误,但在画布上是空白的,其中形象应该是。有没有这方面的任何已知的解决方法?任何建议表示欢迎。
PDF是不是一个图像。这是一个非常复杂的文档格式。你不能直接使用它。
也许你可以使用这样的https://mozilla.github.io/pdf.js/渲染PDF,然后以某种方式使用它。
该HTML5画布在浏览器中托管和浏览器负责从文件数据转换图像的图像数据。作为一个经验法则,如果你可以在浏览器中打开图像,通过HTML img标签没有任何特殊含义的插件,那么它可能与画布的工作,但是这将是下到浏览器的功能。
PDF是不是一种图像格式,但可以包含不同类型的多媒体内容,包括矢量和位图图形,音频,视频的形式编写脚本的富文本文档格式。
如果你碰巧得到这个工作,非常小心跨设备和跨浏览器测试。
这不是Konva的错误。
你可以尝试fabricjs和Mozilla的PDF之间的这种解决方案组合
/**
* Displays next page.
*/
function onNextPage() {
if (pageNum >= pdfDoc.numPages) {
return;
}
prevPageNum = pageNum;
pageNum++;
queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);
/**
* Asynchronously downloads PDF.
*/
pdfjsLib.getDocument(url).then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
document.getElementById('page_count').textContent = pdfDoc.numPages;
// Initial/first page rendering
renderPage(pageNum);
});
// Adding a rectangle
jQuery(function($) {
$("#addRectangle").click(function() {
fCanvas.add(new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20
}));
});
});
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<h1>PDF.js Previous/Next example</h1>
<div>
<input type="button" id="addRectangle" value="Add Signature">
<button id="prev">Previous</button>
<button id="next">Next</button>
<span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
</div>
<canvas id="the-canvas"></canvas>