3

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.

0 Answers0