Jspdf: Converting an image from a url to pdf

[Asturias-sam]

HERE IS HTML CODE:
img class="imagepdf " src="www.images.com/someimage" alt="Smiley face" height="42" width="42

i have used both addimage and addhtml method i am not getting my output ? How can i generate pdf for images in HTML pages

[SunilKumarKurella]

HI Som,

You have to convert your images to base64. Then only you add an image to jspdf.

[Asturias-sam]

I have tried in the same manner by first converting it into the base64(using javascript). But when i pass it to addImage nothing happens , i have also tried it using addhtml by get the image through it class name , but i am not getting the output?What iwe will do if we want to add text and image in the pdf(i.e. i will using both addtext and addhtml function for generating pdf).Could you give me an example at fiddle

[gorsk]

function getBase64Image(img) {

    var canvas = document.createElement("canvas");

    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");

    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/jpeg");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");

}
var img = new Image();

img.onload = function(){
    var dataURI = getBase64Image(img);
    return dataURI;

}

img.src = "Horse.jpg";

var sometext ="horses r awesome";
var doc = new jsPDF();
doc.addImage(img.onload(), 'JPEG', 15, 40, 180, 100);
doc.text(20,70, sometext);
doc.save('Test.pdf');

[Asturias-sam]

getting an error " Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported." and i am using img.src ="some image url "

[gorsk]

js security cross server issue
only works with images on your server

[Asturias-sam]

I am working on a chrome extension which convert images in html page to pdf.So it is not possible to convert images by getting it's url?
what about getting images using addhtml()

var pdf = new jsPDF();

pdf.addHTML($("#imageid"),function() {
    });
pdf.text(35, 25, "Octonyan loves jsPDF");
pdf.output('datauristring');

as fromhtml gives only html content html content not images? plz help me to get images also from html page and convert them to pdf

[Asturias-sam]

Did not understand it ? Would you write the code briefly ?

[gorsk]

not sure try with
doc.output (undefined, {});

[Asturias-sam]

not working is there any way to convert images from html page to pdf in jspdf ?

[diegocr]

@som2014, ignore all the advices you got here, take a look at:

http://mrrio.github.io/jsPDF/examples/basic.html (Graphic Elements -> Draw Examples: Images)

and:

https://github.com/MrRio/jsPDF/blob/master/jspdf.plugin.from_html.js#L496

[Asturias-sam]

but there is a js security cross server issue for chrome browser how can i solve this

[Asturias-sam]

i am getting the images from a url not from local machine and the code will run on chrome browser

[diegocr]

but there is a js security cross server issue for chrome browser how can i solve this

That's why i did provided the second url... check that crossOrigin usage there.

[Asturias-sam]

Thanks man you rock !!!!! finally solve it !!!!! thanks@diegocr but one last thing would you please explain me about crossOrigin how did it solve it?

[diegocr]

You're welcome :)

See https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes

[Asturias-sam]

if i am providing more images , the images are not map together , some images are repeated in pdf
code

 $("#id").find('img').each(function(){
              var som = $(this).attr('src');


                  getImageFromUrl(som,createPDF);


             });

[diegocr]

Don't use the same alias for all of them (ie, monkey)

Hey, that was a fast reply, don't make it an habit ;-)

[Asturias-sam]

i am not using any alias

[diegocr]

You did in your earlier examples:

doc.addImage(imgData, 'JPEG', 10, 10, 50, 50, 'monkey');

Well, please create a jsfiddle showing the problem and i'll take a look at it when i get a chance, if you open a new issue it'll be great too.

[gauravmishra24]

Hi @diegocr ,

I am fetching the images from CMS(Contentful) in my HTML and then trying to generate PDF of that HTML.
But in the generated PDF, images are missing.(seems to be an issue of cross origin).
Please suggest me how can i get rid of this issues.
Below is my code-:
function downloadPDF() {
var canvasToImage = function(canvas){
var img = new Image();
var dataURL = canvas.toDataURL('image/png');
img.crossOrigin = "Anonymous";
img.src = dataURL;
return img;
};

var canvasShiftImage = function(oldCanvas,shiftAmt){
    shiftAmt = parseInt(shiftAmt) || 0;
    if(!shiftAmt){ return oldCanvas; }

    var newCanvas = document.createElement('canvas');
    newCanvas.height = oldCanvas.height - shiftAmt;
    newCanvas.width = oldCanvas.width;
    var ctx = newCanvas.getContext('2d');
    ctx.mozImageSmoothingEnabled = false;
    ctx.webkitImageSmoothingEnabled = false;
    ctx.msImageSmoothingEnabled = false;
    ctx.imageSmoothingEnabled = false;

    var img = canvasToImage(oldCanvas);
    ctx.drawImage(img,0, shiftAmt, img.width, img.height, 0, 0, img.width, img.height);

    return newCanvas;
};

var canvasToImageSuccess = function(canvas){
  var pdf = new jsPDF('l','px'),
      pdfInternals = pdf.internal,
      pdfPageSize = pdfInternals.pageSize,
      pdfScaleFactor = pdfInternals.scaleFactor,
      pdfPageWidth = pdfPageSize.width,
      pdfPageHeight = pdfPageSize.height,
      totalPdfHeight = 0,
      htmlPageHeight = canvas.height,
      htmlScaleFactor = canvas.width / (pdfPageWidth * pdfScaleFactor),
      safetyNet = 0;

  while(totalPdfHeight < htmlPageHeight && safetyNet < 15){
      var newCanvas = canvasShiftImage(canvas, totalPdfHeight);
      pdf.addImage(newCanvas, 'png', 0, 0, pdfPageWidth, 0, null, 'NONE');
      // var alias = Math.random().toString(35);
      // pdf.addImage(newCanvas, 0, 0, pdfPageWidth, 0, 'png', alias, 'NONE');

      totalPdfHeight += (pdfPageHeight * pdfScaleFactor * htmlScaleFactor);

      if(totalPdfHeight < htmlPageHeight){
          pdf.addPage();
      }
      safetyNet++;
  }

   var pageName = document.location.pathname.match(/[^\/]+$/)[0];
   pdf.save(pageName + '.pdf');
};

html2canvas($('body')[0],
  {
      onrendered: function(canvas){
          canvasToImageSuccess(canvas);
      }
  });

}

[selvambe23]

@som2014 i am having same issue i used aws s3 bucket for storing my web images and when i convert html to pdf image was not rendering to my pdf please give the example code for how to render the images from another domain or s3 bucket. i added my code and error follows.

                var content   = getpopup.content(downlodId);
                var jsPDF     = require('jspdf');
                var doc       = new jsPDF('p' , 'pt', 'a4');

                var specialElementHandlers = {
                    '#download-section': function (element, renderer) {
                    return true;
                    }
                };

                doc.fromHTML(content, 10, 10, {
                    'width': 750,
                    'elementHandlers': specialElementHandlers }, function(pdf) {   doc.save('saveInCallback.pdf');

Access to Image at image url ' from origin 'http://localhost:8000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access.

thanks in advance

[gauravmishra24]

@selvambe23 Could you please use "useCORS: true" option of the fromHTML method...
doc.fromHTML(content, 10, 10, {
'width': 750,
useCORS: true
'elementHandlers': specialElementHandlers }, function(pdf) { doc.save('saveInCallback

Hope this will solve your issue.

[selvambe23]

@gauravmishra24 i added above code but it was helpless same things happen.

[babu0104]

Using Jspdf fromHTML image size different in pdf, Any solution?

[babu0104]

Can any one help for the issue? where can I specify the width inside the pdf.fromHTML method for images?

[spiritOfSasidhar]

can i pass PDF in addImage(),Actually i have a pdf which contains images i want to display them too in generated PDF using jspdf in my angular application

[iAminaDarwish]

https://jsfiddle.net/aminadarwish/o64fb0zh/

check this fiddle