Adding Image to a PDF using jspdf makes the image black

Question

When i try to add the image in the URL to a PDF file the image comes completley black.
But when I click the download pdf button again the image gets added to the PDF.Only when I do it the first time, the image comes as black.

 function getBase64Image(url) {

alert(url);
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var img = new Image();
img.src = url;
img.style.height ="181px";
img.style.width ="183px";
//img.crossOrigin ="Anonymous";

context.drawImage(img,0,0);

var dataURL = canvas.toDataURL("image/jpeg");
alert(dataURL);
document.body.appendChild(img);


var doc = new jsPDF('landscape');

doc.addImage(img,'JPEG',0,0,50,50);
doc.save('Saved.pdf');

 }

getBase64Image("http://localhost:64931/jspdf/download.png");

Answer 1

What happens when you change your code like this:

A changed JPEG to PNG, that worked for me.

function getBase64Image(url) {

alert(url);
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var img = new Image();
img.src = url;
img.style.height ="181px";
img.style.width ="183px";
//img.crossOrigin ="Anonymous";

context.drawImage(img,0,0);

var dataURL = canvas.toDataURL("image/png");
alert(dataURL);
document.body.appendChild(img);


var doc = new jsPDF('landscape');

doc.addImage(img,'PNG',0,0,50,50);
doc.save('Saved.pdf');

 }

getBase64Image("http://localhost:64931/jspdf/download.png");

Answer 2

I was facing the same issue yesterday, and writing this answer incase someone finds it useful

What I was trying to achieve?

• I was converting the doc (pdf) into a blob and then opening it in a print dialogue, but the image was black.

  var blob = new Blob([doc.output()], { type: "application/pdf" });

This is how I was trying to convert it into a blob. but this resulted in a black image

Solution

• jsPDF allows us to add arguments in the output function.

[](jsPDF output api)

adding type as bloburl works for me, as i was opening a print dialogue using the blob url

  let iframe = document.createElement("iframe"); //load content in an iframe to print later
    document.body.appendChild(iframe);

    //* print dialogue
    iframe.style.display = "none";
    iframe.src = blobURL;
    console.log(blobURL) // same blobURL that was received from jsPDF
    iframe.onload = function () {
      setTimeout(function () {
        iframe.focus();
        iframe.contentWindow.print(); // opens a print dialogue box
      }, 1);
    };