PDF.js Bilder Einfügen

Habe ich angefangen mit PDF.js, eine ausgezeichnete Arbeit, durch die Art und Weise.

Aber jetzt will ich ein Bild einfügen (aus einem canvas-element) auf der pdf-Seite. Hier ist mein code:

var image = myCanvas.getContext('2d').getImageData(0,0,400,300),
doc = new pdf();
doc.setProperties({
    title: fileName,
    author: 'VirtuaLab®',
    creator: 'pdf.js'
});
doc.addPage();
data = doc.output();

Aber ich habe nicht gefunden was zum einfügen von Bildern auf PDF.js Seiten.

Vielleicht doc.image() oder doc.addImage?

Der häufigste Anwendungsfall ist das einfügen eines Bildes als stempelaufdruck über eine benutzerdefinierte Aussehen stream, so dass Sie nicht brauchen, um Bearbeiten Sie die eigentlichen pdf-Seite mit Inhalt. Hier mehr dazu: pspdfkit.com/blog/2018/what-are-appearance-streams

InformationsquelleAutor Danilo Valente | 2012-08-01

  1. 5

    Disclaimer: ich arbeite für Bytescout

    Leider PDF.js nicht mit Bildern arbeiten, und das ist, warum wir entwickelt PDF Generator SDK für Javascript (kostenlos für nicht-kommerzielle Nutzung) auf dem Bild (von url oder der canvas-Bereich) wie folgt:

    //load image from local file
pdf.imageLoadFromUrl('image1.jpg');
//place this mage at given X, Y coordinates on the page
pdf.imagePlace(20, 40);

    Wichtig zu sagen, dass man das Gesicht Begrenzung auf der Bildgröße, als BytescoutPDF.js kann verbraucht den Speicher zu verarbeiten großes Bild (dieses Problem wird verursacht, durch die Speicher-Beschränkungen für javascript).

    Jedoch sollte das script funktionieren, in Fall müssen Sie nur einfügen, logo, Bild oder kleines Bild in die erzeugte pdf-Datei.

    UPDATE: die neueste version von jsPDF (nicht zu verwechseln mit PDF.js) scheint zu funktionieren mit den Bildern, siehe Beispiel auf Beispiele-Seite.

    Hallo @Eugene Können wir hinzufügen, html(oder div) mit Bildern zum generieren von pdf-Dateien? Ich thi ist möglich, plaese teilen einige code-Beispiel. Vielen Dank im Voraus.
    in bytescout einfache html-Formatierung wird unterstützt für text und links, aber nicht für die Bilder, leider. Bilder können platziert werden verwenden .imagePlace () - Methode

    InformationsquelleAutor Eugene

  2. 0

    Wenn ich verstehe deine Frage richtig Sie möchten ein <img> statt einer <canvas> mit pdf.js.

    So, hier ist meine Lösung für dieses problem, fügen Sie das zurückgegebene Bild in ein canvas als normal, geben dem Bild eine display: none;.

    Dann verwenden Sie die .toDataURL() - Methode des canvas-element um eine src für Ihre img.

    var canvas = document.getElementById("myCanves");
var img = document.getElementById("myImg");
img.src = canvas.toDataURL();

    Ich hoffe, das hilft.

    InformationsquelleAutor Mendy

Schreibe einen Kommentar