Je ne parviens pas à charger un objet Konva Image dans mon canevas si la source est un PDF.
Aucune erreur n'est générée mais le canevas est vide là où l'image devrait être. Existe-t-il des solutions de contournement connues pour cela? Toutes les suggestions sont les bienvenues.
3 Réponses :
Le PDF n'est pas une image. C'est un format de document très complexe. Vous ne pouvez pas l'utiliser directement.
Vous pouvez probablement utiliser quelque chose comme ça https://mozilla.github.io/pdf.js / pour rendre le pdf, puis l'utiliser d'une manière ou d'une autre.
Le canevas HTML5 est hébergé dans un navigateur et le navigateur est responsable de la conversion des images des données de fichier en données d'image. En règle générale, si vous pouvez ouvrir une image dans votre navigateur, c'est-à-dire via la balise html img sans plugins spéciaux, alors cela pourrait fonctionner avec le canevas, mais cela dépendra des capacités du navigateur.
Le PDF n'est pas un format d'image, mais un format de document texte riche scriptable qui peut contenir différents types de contenu multimédia, y compris des graphiques vectoriels et bitmap, de l'audio, de la vidéo et des formulaires.
Si vous parvenez à faire fonctionner cela, soyez très prudent lors des tests multi-appareils et multi-navigateurs.
Ce n'est pas un bogue dans Konva.
pouvez-vous essayer cette combinaison de solution entre fabricjs et pdf de mozilla
<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>
/**
* 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
}));
});
});
bon travail affichant la réponse possible, mais le PO était axé sur la bibliothèque de canevas Konvajs. L'ajout d'une autre bibliothèque à la liste de téléchargement n'est peut-être pas dans la portée.
Pourriez-vous revoir les réponses et en accepter une si elle répond à votre question?