jsPDF addImage not working

I am using jsPDF to create a PDF by looping through some HTML code to find the values it needs. I am able to get the values just fine, but when I try to insert the header_img it does not work. I have found many solutions on Google but the one I am working with now is the only one that does not throw an error.

This is the code being used to get take the url that is provided via the loop, convert it to a DataURL, and then insert the image into the PDF. It does not give me any errors, but all that is in the PDF is the black border and no image. Any ideas?

function getDataUri(url, cb) {
	var image = new Image();
	image.setAttribute('crossOrigin', 'anonymous'); //getting images from external domain

	image.onload = function () {
		console.log(url);
		var canvas = document.createElement('canvas');
		canvas.width = this.naturalWidth;
		canvas.height = this.naturalHeight; 

		//next three lines for white background in case png has a transparent background
		var ctx = canvas.getContext('2d');
		ctx.fillStyle = '#fff';  /// set white fill style
		ctx.fillRect(0, 0, canvas.width, canvas.height);

		canvas.getContext('2d').drawImage(this, 0, 0);

		cb(canvas.toDataURL('image/jpeg'));
	};

	image.src = url;
}

var pdf = new jsPDF('p', 'in', 'letter');
	

var left_margin = .5;
var top_margin =.5;
var height = 2.313;
var width = 3.25;
var header_img_height = 1;

//Draw border
pdf.setLineWidth(1/92);
pdf.setDrawColor(0, 0, 0);
pdf.rect(left_margin, top_margin, width, height);
	
//example image
var header_img = 'http://www.quotehd.com/imagequotes/authors24/jeff-olsen-quote-two-clicks-and-its-broke.jpg';
	
let logo = null;

//callback to get DataURL
getDataUri(header_img, function(dataUri) {
	logo = dataUri;
	console.log("logo=" + logo);
	
  //Add image to PDF
	pdf.addImage(logo, 'JPEG', left_margin, top_margin, header_img_height, width);
});

pdf.output('save', 'test.pdf');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Solution

I ended up solving the issue by writing a PHP script that would convert the image to Base64.

$img_src = urldecode($_GET['url']);
$img_str = base64_encode(file_get_contents($img_src));
echo 'data:' . getimagesize($img_src)['mime'] . ';base64,' . $img_str;

Then using jQuery, I passed the url to the PHP script and got the Base64 data in return:

function getBase64(url) {

    var out = '';
    $.ajax({
        url: 'get-dataurl.php?url=' + encodeURI(url),
        async: false,
        dataTye: 'text',
        success: function(data) {
            out = data;
        }
  });
    return out;
}

Certainly was not ideal, but it works.