0

To save my canvas I call canvas.toBlob and upload it via ajax post. Now when I load my page I'd like to retrieve it from the database. I been googling for 40mins and can't figure out how to put it on a page where the canvas can load the png image. The closest I found was the below and doesn't seem helpful. I can't figure out how to load that data as a canvas image or imagebitmap

var png_blob = new Blob(new Uint8Array([@binaryText]), { type: "image/png" });

I didn't do anything to confirm but the data does appear to be a png image due to me noticing the filesize being different (seems compressed and not 'raw'). How do I get a PNG binary back into a canvas?

Eric Stotch
  • 101
  • 11
  • @Kaiido I'll delete my above comments is the question clear enough? I can't tell – Eric Stotch Jun 02 '20 at 23:53
  • Yes, far better... though we still need to know how you save that file on your database and why you can't just do img.src="yourserver/gimmethefile" directly. => it's now a server side question, would help if you tagged with your environment. – Kaiido Jun 02 '20 at 23:55
  • @Kaiido I need it in a canvas because the page is editing it. From what I can tell its the raw binary of a PNG file. I grab the bytes as a uint8 from the database and use a string on page. Maybe base64 is better but I have no clue how to load it in any format at the moment. Not sure if I should put it in an image and somehow load the canvas from the image. I know I'll need to tell the canvas/js that the mime is PNG so it can decode it properly – Eric Stotch Jun 02 '20 at 23:58
  • Well to draw an image to a canvas, you create a new HTMLImageElement, you assign its `src` to an url pointing to the image and once it's loaded you call ctx.drawImage. But I'm assuming that's not your problem. Yours is that your server doesn't send the image with the proper Content-Type: image/png headers, so the browser doesn't know it's an image. So what you need is to fix your server side code. – Kaiido Jun 03 '20 at 01:20

0 Answers0