Example of loading Json file

[ghost]

Hi, although it has code for loading Json file but I have not seen how to use it. Example one shows loading pdf. I want to load canvas and objects from saved json data. Thank you.

[RavishaHesh]

pdf.loadFromJSON(serializedJSON) // continue edit with saved JSON. To do this on page load use ready option(scripts.js line 5)

var pdf = new PDFAnnotate("pdf-container", "pdf.pdf", {
  onPageUpdated(page, oldData, newData) {
    console.log(page, oldData, newData);
  },
  ready() {
    console.log("Plugin initialized successfully");
    pdf.loadFromJSON({
      page_setup: {...},
      pages: [...]
    });
  },
  scale: 1.5,
  pageImageCompression: "MEDIUM", // FAST, MEDIUM, SLOW(Helps to control the new PDF file size)
});

hope this answers your question

[ghost]

Thank you. I noticed the JSON file has a background. What I thought JSON file has complete things to draw something in the canvas including pages..background etc. So why do we need to use PDF files (new PDFAnnotate("pdf-container", "pdf.pdf")?

I assume we have two options either load everything from JSON file or load from PDF. As per this example, we are loading PDF and JSON files. Will it not create a duplicate background? If so if we convert it into pdf the file size could be larger?

In this case, If I am not wrong we could auto detect PDF or JSON ( ie new PDFAnnotate("pdf-container", "pdf.pdf".. or new PDFAnnotate("pdf-container", "pdf.json"..). If JSON we do this and if PDF do this ..

[RavishaHesh]

Good catch! I didn't think about that before. I think it's better to load the PDF and render annotations on top of that. I'll push a fix for that ASAP. Thank you very much for bringing this up

[ghost]

Thank you for your hard work. For PDF loading, is it possible load objects only without the background from JSON file ? Basically, I am saving JSON data in a database without the background since it’s huge. So load backgrounds from pdf but objects from JSON file.

Thank you again.

[RavishaHesh]

Yes, that's what I'm planning to do.

[RavishaHesh]

@davidhagen I've updated master with a fix. Please note that serializePdf function now requires to pass a callback function as first argument

[ghost]

Thank @RavishaHesh.

When we load the JSON file the PDF background disappears we only see objects. I think we should add the PDF background when we loop through the JSON file or make sure when read through the JSON file it ignore the background.

Thank you again .. well deserve

[ghost]

Since I have one page PDF ugly way I'm doing this - when we loop through PDF pages and add background I assign inst.background=background then when loading from JSON I add the background

fabricObj.loadFromJSON(pages[index], function () {
    **fabricObj.setBackgroundImage(inst.background, fabricObj.renderAll.bind(fabricObj));**
    inst.fabricObjectsData[index] = fabricObj.toJSON()
})

[RavishaHesh]

That's strange. I've tested it before pushing to the master branch. Can you check the example in the repo? Please let me know if you can replicate the same behavior on that as well. Thanks BTW I did saw that behavior on as soon as I've updated the code but after hard reload I wasn't able to re-produce that

[ghost]

@RavishaHesh, is it possible to improve the image quality and text that pdf.js generate? Basically, the canvas/image is not clear as the original PDF.

[dhavalp2511]

same issue facing background gone. @RavishaHesh @ghost