addImage documentation

[doubletaketech]

I have a screenshot image taken from an HTML5 Canvas. It may be taller than one page or span the equivalent of multiple pages in the PDF. How do I set the addImage options so that it will use the actual height of the canvas?
I tried using canvas width and height, but it just zooms and blurs.

I can't find any documentation on jsPDF addImage() to see if there is a way to adjust the options to have a single image with a height that adjusts.

Here is my code

var element = $('#report');
        html2canvas(element, {
            onrendered: function(canvas) {
                var doc = new jsPDF('landscape');
                var dataUrl = canvas.toDataURL('image/jpeg');
                doc.addImage(dataUrl,0,0,canvas.width,canvas.height);
                doc.save('MeterPhotosReport.pdf');   
            }
        });

Thanks,
Don

[doubletaketech]

Is there a way to output a multi-page single image using addImage or fromHTML pagesplit?

[vinod0001]

image.html file is now saving the file ...kindly check the file

[doubletaketech]

vinod0001, what does your response mean?

[vinod0001]

Its working now... Thnx
On Jan 10, 2015 12:56 AM, "Don Kerr" notifications@github.com wrote:

vinod0001, what does your response mean?

Reply to this email directly or view it on GitHub
#434 (comment).

[doubletaketech]

Is there a new release/file to use? Where do I get it? Nothing in this repo looks new.

[vinod0001]

Sorry didnt get you? Wat are you asking plz explain IT
On Jan 10, 2015 8:04 AM, "Don Kerr" notifications@github.com wrote:

Is there a new release/file to use? Where do I get it? Nothing in this
repo looks new.

Reply to this email directly or view it on GitHub
#434 (comment).

[doubletaketech]

Have you solved the problem I posted in this issue? Can you now have a single image that extends to multiple pages? If so, is there a new version of jsPDF that supports it?

Your response was not clear what you mean by "kindly check the file?"

Thank you.

[vinod0001]

No that image is showing only at first page. Can you extend the image on
multiple pages?
On Jan 11, 2015 6:44 AM, "Don Kerr" notifications@github.com wrote:

Have you solved the problem I posted in this issue? Can you now have a
single image that extends to multiple pages? If so, is there a new version
of jsPDF that supports it?

Your response was not clear what you mean by "kindly check the file?"

Thank you.

Reply to this email directly or view it on GitHub
#434 (comment).

[tneullas]

I had the same problem as you taketech.
I couldn't find any official function.
Here is what I do to solve my problem :

doc.addImage(dataUrl,0,0,canvas.width,canvas.height);
if(canvas.height > 365){ // I noticed 365 was the height of my page but for your landscape page it must be lower depending on your unit (pt, or mm or cm etc)
  doc.addPage();
  doc.addImage(dataUrl,0,-365,canvas.width,canvas.height);
}

The trick is the -365 so in fact it's the next part of images, be carefull second page doesn't have necessarly the same unit so this number can vary.
It doesn't solve the problem if you need a gutter but it's better than nothing.

Bye.

[SwarnadeepNandy]

Can you please specify, what all the scripts i need to include for addimage()?

[wangzhixuan]

Here is my solution to break a large page into several pages automatically.

 // suppose your picture is already in a canvas

          var imgData = canvas.toDataURL('image/png');

          /*
          Here are the numbers (paper width and height) that I found to work. 
          It still creates a little overlap part between the pages, but good enough for me.
          if you can find an official number from jsPDF, use them.
          */
          var imgWidth = 210; 
          var pageHeight = 295;  
          var imgHeight = canvas.height * imgWidth / canvas.width;
          var heightLeft = imgHeight;

          var doc = new jsPDF('p', 'mm');
          var position = 0;

          doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
          heightLeft -= pageHeight;

          while (heightLeft >= 0) {
            position = heightLeft - imgHeight;
            doc.addPage();
            doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
            heightLeft -= pageHeight;
          }
          doc.save(filename + '.pdf');

[wangzhixuan]

@SwarnadeepNandy no need to include addition scripts. It is already in jspdf.debug.js or jspdf.min.js in the latest release. However, somehow I can find NO documentation of that method here

[SwarnadeepNandy]

Hi,
Thanks Zhixuan Wang for your response.
I think it will be very helpful for me.

Thanks & Regards
Swarnadeep Nandy
On Oct 6, 2015 5:31 AM, "Zhixuan Wang" notifications@github.com wrote:

Here is my solution to break a large page into several pages automatically.

// suppose your picture is already in a canvas

      var imgData = canvas.toDataURL('image/png');

      /*          Here are the numbers (paper width and height) that I found to work.           It still creates a little overlap part between the pages, but good enough for me.          if you can find an official number from jsPDF, use them.          */
      var imgWidth = 210;
      var pageHeight = 295;
      var imgHeight = canvas.height * imgWidth / canvas.width;
      var heightLeft = imgHeight;

      var doc = new jsPDF('p', 'mm');
      var position = 0;

      doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
      heightLeft -= pageHeight;

      while (heightLeft >= 0) {
        position = heightLeft - imgHeight;
        doc.addPage();
        doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;
      }
      doc.save(filename + '.pdf');

—
Reply to this email directly or view it on GitHub
#434 (comment).

[hughesmatias]

que seria el heightLeft ?
what is the heightLeft?

[trilokajency]

I copy the solution here: // suppose your picture is already in a canvas
var imgData = canvas.toDataURL('image/png');

  /*
  Here are the numbers (paper width and height) that I found to work. 
  It still creates a little overlap part between the pages, but good enough for me.
  if you can find an official number from jsPDF, use them.
  */
  var imgWidth = 210; 
  var pageHeight = 295;  
  var imgHeight = canvas.height * imgWidth / canvas.width;
  var heightLeft = imgHeight;

  var doc = new jsPDF('p', 'mm');
  var position = 0;

  doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
  heightLeft -= pageHeight;

  while (heightLeft >= 0) {
    position = heightLeft - imgHeight;
    doc.addPage();
    doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
    heightLeft -= pageHeight;
  }
  doc.save( 'file.pdf');