I'm getting a pgm data, and want to put it in canvas, but it is not working . that's why i need to convert it to png.
first I decoded the pgm base64 to UTF-8 and try to drawImage put nathing happen.
let base64= "UDIKIyBDcmVhdGVkIGJ5IEdJTVAgdmVyc2lvbiAyLjEwLjggUE5NIHBsdWctaW4KMjY3IDE2MgoyNTUKMjA1CjIwNQoyMDUKMjA1CjIwNQoyMDUKMjA1CjIwNQoyMDUKMjA1CjIwNQoyMDUKMjA1CjIwNQoyMDUKMjA1CjIwNQoyMDUKMjA1CjIwNQoyMDUKM....."
let decoded = base64decode(base64);
let imageUrl = 'data:image/pgm;utf-8,' + decoded;
var blob = this.dataURLtoBlob(imageUrl)
var canvas = document.getElementById('canvas') as HTMLCanvasElement;
let ctx = canvas.getContext('2d');
var img = new Image(500,500);
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);
}
img.src = window.URL.createObjectURL(blob);
console.log(img.src);
}
I expect the output map Image 500*500, but the actual output is white image 500*500 .
ctx.fillStyle = 'white';
any help or library thanks.