We Keep Coding

Image is not getting displayed when adding image to a PDF

I am trying to create PDF with Image. I have URL of Image as below:
var url = "https://firebasestorage.googleapis.com/v0/b/dicom-poc.appspot.com/o/images%2FNiouCzjBYna8Wx1VO2x3UST5tDc2%2F2020-10-07%2F05%3A03%3A58%2Fvisualization%2FL-CC.png?alt=media&token=dce8859a-3427-432b-8176-590e9569aad9"
and my code is here:
var pdf = new jsPDF();
var img = new Image();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
img = document.createElement('img');
img.src = url;
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
var dataURL = canvas.toDataURL('image/png')
var base64 = dataURL.replace(/^data:.+;base64,/, '');
pdf.text("Hi");
pdf.addImage(base64,'PNG',5,5,50,50);
pdf.save("download.pdf");
}
After running above code PDF is getting downloaded successfully with text "Hi" but image is not there.
I have tried multiple solutions suggested by people but no result.
Could you please guide me for same.
Thanks in advanace!

You did not draw anything on the canvas.
var pdf = new jsPDF();
var img = new Image();
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
img = document.createElement('img');
img.src = url;
img.onload = function(){
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, img.width, img.width);
var dataURL = canvas.toDataURL('image/png')
var base64 = dataURL.replace(/^data:.+;base64,/, '');
pdf.text("Hi");
pdf.addImage(base64,'PNG',5,5,50,50);
pdf.save("download.pdf");
}

SVG to PNG in javascript

I have a problem with converting svg to png(base64).
Svg to base64 works fine, because it displays just fine in the browser.
But when i try to load in the image, it won't load. Anybody might have an idea why?
var xml = new XMLSerializer().serializeToString(svg);
var svg64 = btoa(xml);
var b64start = 'data:image/svg+xml;base64,';
var image64 = b64start + svg64;
console.log(image64);
const img = new Image();
img.onload = function() {
const canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
const dataBase64 = canvas.toDataURL('image/png');
console.log(dataBase64);
generatePowerpoint(response, dataBase64);
}
img.onerror = function() {
console.log(this.src);
}
img.src = image64;

It depends of the browser you are using. Using Firefox, the svg tag must have width and height attributes (unit not in %).
It also depends of the content of the svg. If the svg contains non-latin characters, btoa may fail (even if it seems not to be the problem here since Svg to base64 works fine in your case).

Get base64 string from existing png not working

I need the base64-string (not URL) from an existing PNG (photo from a text document).
I use the following function to receive base64-String for my photo. The string, which I get back, is valid but if I test it in a online decoder, I get this image:
imageResult is an image-Element in my DOM. Any hints what is going wrong?
JS
var img = this.imageResult.nativeElement;
var ocrImage = this.getBase64Image(img);
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/png");
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

Image not getting copied properly in javascript

I need images to be copied and sent to server for image rotations etc.
To copy an image I'm using this code( from Get image data in JavaScript?):
function getBase64Image(img) {
// Create an empty canvas element
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/png");
var replaced = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
console.log("dataurl=",dataURL);
console.log("replaced=",replaced);
return replaced;
}
It is called like this:
$("#xyz").load(send_image).each(function () {
if (this.complete)
$(this).load();
});
function send_image(){
getBase64Image(document.getElementById('xyz'));
}
However in getBase64Image function once in 40-50 times dataURL is being returned as empty.
What could be the reason?

Saving image to localstorage - canvas

I'm using html5 storage to store my image.
It works great in chrome. In FireFox it works 8/10 times.
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);
console.log("line 1 : " + img.src);
var dataURL = canvas.toDataURL('image/jpeg');
console.log("line 2 : " + dataURL.replace(/^data:image\/(jpeg);base64,/, ""));
return dataURL.replace(/^data:image\/(jpeg);base64,/, "");
}
Sometimes it returns only "data,".
I see that the canvas size is 0x0:
canvas.width = img.width;
canvas.height = img.height;
Why is that happening?

If the height or width of the canvas is 0, the string "data:," is returned.
This is most likely the cause for some images to fail to receive a proper dataUrl.
Check your img elements and/or scripts to obtain and set the width and height of the canvas.
The auto width and height are only available after the image is loaded.

The function is trying to get the height/width before the image is loaded so I get 0x0. To solve that add img.onload before calling the save function.
function readURL(input, image, width, height) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
//Save the image
var img = new Image();
img.src = e.target.result;
img.onload = function (e){
if (image.id == 'photo1') {
save(img, 'image1');
}
else {
save(img, 'image2');
}
}
}
reader.readAsDataURL(input.files[0]);
}
}