Canvas to image base64 encoded url not showing image

Question

I am having an issue to display a base64 encoded image. I will explain it deeply below.

HTML Code:

<div class="canvas-container" style="width: 856px; height: 201px; position: relative; user-select: none;">
   <canvas class="upper-canvas img-responsive" width="856" height="201" style="position: absolute; width: 856px; height: 201px; left: 0px; top: 0px; touch-action: manipulation; user-select: none; cursor: default;"> 
   </canvas>
</div>

First thing, I have tried to convert the canvas to an image. So, I wrote a javascript code to do that.

Code:

var canvas1 = document.getElementsByClassName('upper-canvas');
dataUrl = canvas1[0].toDataURL("image/png");

Here,

upper-canvas -> class name for the canvas.

Now, canvas1[0] has canvas details in an array. So that I have tried like canvas1[0].toDataURL("image/png").

It also returns a URL in base64 encoded format.

output:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA1gAAADJCAYAAAA+TZPTAAANjUlEQVR4Xu3XMREAAAgDMerfNCZ+DAI65Fh+5wgQIECAAAECBAgQIEAgEViyYoQAAQIECBAgQIAAAQIETmB5AgIECBAgQIAAAQIECEQCAiuCNEOAAAECBAgQIECAAAGB5QcIECBAgAABAgQIECAQCQisCNIMAQIECBAgQIAAAQIEBJYfIECAAAECBAgQIECAQCQgsCJIMwQIECBAgAABAgQIEBBYfoAAAQIECBAgQIAAAQKRgMCKIM0QIECAAAECBAgQIEBAYPkBAgQIECBAgAABAgQIRAICK4I0Q4AAAQIECBAgQIAAAYHlBwgQIECAAAECBAgQIBAJCKwI0gwBAgQIECBAgAABAgQElh8gQIAAAQIECBAgQIBAJCCwIkgzBAgQIECAAAECBAgQEFh+gAABAgQIECBAgAABApGAwIogzRAgQIAAAQIECBAgQEBg+QECBAgQIECAAAECBAhEAgIrgjRDgAABAgQIECBAgAABgeUHCBAgQIAAAQIECBAgEAkIrAjSDAECBAgQIECAAAECBASWHyBAgAABAgQIECBAgEAkILAiSDMECBAgQIAAAQIECBAQWH6AAAECBAgQIECAAAECkYDAiiDNECBAgAABAgQIECBAQGD5AQIECBAgQIAAAQIECEQCAiuCNEOAAAECBAgQIECAAAGB5QcIECBAgAABAgQIECAQCQisCNIMAQIECBAgQIAAAQIEBJYfIECAAAECBAgQIECAQCQgsCJIMwQIECBAgAABAgQIEBBYfoAAAQIECBAgQIAAAQKRgMCKIM0QIECAAAECBAgQIEBAYPkBAgQIECBAgAABAgQIRAICK4I0Q4AAAQIECBAgQIAAAYHlBwgQIECAAAECBAgQIBAJCKwI0gwBAgQIECBAgAABAgQElh8gQIAAAQIECBAgQIBAJCCwIkgzBAgQIECAAAECBAgQEFh+gAABAgQIECBAgAABApGAwIogzRAgQIAAAQIECBAgQEBg+QECBAgQIECAAAECBAhEAgIrgjRDgAABAgQIECBAgAABgeUHCBAgQIAAAQIECBAgEAkIrAjSDAECBAgQIECAAAECBASWHyBAgAABAgQIECBAgEAkILAiSDMECBAgQIAAAQIECBAQWH6AAAECBAgQIECAAAECkYDAiiDNECBAgAABAgQIECBAQGD5AQIECBAgQIAAAQIECEQCAiuCNEOAAAECBAgQIECAAAGB5QcIECBAgAABAgQIECAQCQisCNIMAQIECBAgQIAAAQIEBJYfIECAAAECBAgQIECAQCQgsCJIMwQIECBAgAABAgQIEBBYfoAAAQIECBAgQIAAAQKRgMCKIM0QIECAAAECBAgQIEBAYPkBAgQIECBAgAABAgQIRAICK4I0Q4AAAQIECBAgQIAAAYHlBwgQIECAAAECBAgQIBAJCKwI0gwBAgQIECBAgAABAgQElh8gQIAAAQIECBAgQIBAJCCwIkgzBAgQIECAAAECBAgQEFh+gAABAgQIECBAgAABApGAwIogzRAgQIAAAQIECBAgQEBg+QECBAgQIECAAAECBAhEAgIrgjRDgAABAgQIECBAgAABgeUHCBAgQIAAAQIECBAgEAkIrAjSDAECBAgQIECAAAECBASWHyBAgAABAgQIECBAgEAkILAiSDMECBAgQIAAAQIECBAQWH6AAAECBAgQIECAAAECkYDAiiDNECBAgAABAgQIECBAQGD5AQIECBAgQIAAAQIECEQCAiuCNEOAAAECBAgQIECAAAGB5QcIECBAgAABAgQIECAQCQisCNIMAQIECBAgQIAAAQIEBJYfIECAAAECBAgQIECAQCQgsCJIMwQIECBAgAABAgQIEBBYfoAAAQIECBAgQIAAAQKRgMCKIM0QIECAAAECBAgQIEBAYPkBAgQIECBAgAABAgQIRAICK4I0Q4AAAQIECBAgQIAAAYHlBwgQIECAAAECBAgQIBAJCKwI0gwBAgQIECBAgAABAgQElh8gQIAAAQIECBAgQIBAJCCwIkgzBAgQIECAAAECBAgQEFh+gAABAgQIECBAgAABApGAwIogzRAgQIAAAQIECBAgQEBg+QECBAgQIECAAAECBAhEAgIrgjRDgAABAgQIECBAgAABgeUHCBAgQIAAAQIECBAgEAkIrAjSDAECBAgQIECAAAECBASWHyBAgAABAgQIECBAgEAkILAiSDMECBAgQIAAAQIECBAQWH6AAAECBAgQIECAAAECkYDAiiDNECBAgAABAgQIECBAQGD5AQIECBAgQIAAAQIECEQCAiuCNEOAAAECBAgQIECAAAGB5QcIECBAgAABAgQIECAQCQisCNIMAQIECBAgQIAAAQIEBJYfIECAAAECBAgQIECAQCQgsCJIMwQIECBAgAABAgQIEBBYfoAAAQIECBAgQIAAAQKRgMCKIM0QIECAAAECBAgQIEBAYPkBAgQIECBAgAABAgQIRAICK4I0Q4AAAQIECBAgQIAAAYHlBwgQIECAAAECBAgQIBAJCKwI0gwBAgQIECBAgAABAgQElh8gQIAAAQIECBAgQIBAJCCwIkgzBAgQIECAAAECBAgQEFh+gAABAgQIECBAgAABApGAwIogzRAgQIAAAQIECBAgQEBg+QECBAgQIECAAAECBAhEAgIrgjRDgAABAgQIECBAgAABgeUHCBAgQIAAAQIECBAgEAkIrAjSDAECBAgQIECAAAECBASWHyBAgAABAgQIECBAgEAkILAiSDMECBAgQIAAAQIECBAQWH6AAAECBAgQIECAAAECkYDAiiDNECBAgAABAgQIECBAQGD5AQIECBAgQIAAAQIECEQCAiuCNEOAAAECBAgQIECAAAGB5QcIECBAgAABAgQIECAQCQisCNIMAQIECBAgQIAAAQIEBJYfIECAAAECBAgQIECAQCQgsCJIMwQIECBAgAABAgQIEBBYfoAAAQIECBAgQIAAAQKRgMCKIM0QIECAAAECBAgQIEBAYPkBAgQIECBAgAABAgQIRAICK4I0Q4AAAQIECBAgQIAAAYHlBwgQIECAAAECBAgQIBAJCKwI0gwBAgQIECBAgAABAgQElh8gQIAAAQIECBAgQIBAJCCwIkgzBAgQIECAAAECBAgQEFh+gAABAgQIECBAgAABApGAwIogzRAgQIAAAQIECBAgQEBg+QECBAgQIECAAAECBAhEAgIrgjRDgAABAgQIECBAgAABgeUHCBAgQIAAAQIECBAgEAkIrAjSDAECBAgQIECAAAECBASWHyBAgAABAgQIECBAgEAkILAiSDMECBAgQIAAAQIECBAQWH6AAAECBAgQIECAAAECkYDAiiDNECBAgAABAgQIECBAQGD5AQIECBAgQIAAAQIECEQCAiuCNEOAAAECBAgQIECAAAGB5QcIECBAgAABAgQIECAQCQisCNIMAQIECBAgQIAAAQIEBJYfIECAAAECBAgQIECAQCQgsCJIMwQIECBAgAABAgQIEBBYfoAAAQIECBAgQIAAAQKRgMCKIM0QIECAAAECBAgQIEBAYPkBAgQIECBAgAABAgQIRAICK4I0Q4AAAQIECBAgQIAAAYHlBwgQIECAAAECBAgQIBAJCKwI0gwBAgQIECBAgAABAgQElh8gQIAAAQIECBAgQIBAJCCwIkgzBAgQIECAAAECBAgQEFh+gAABAgQIECBAgAABApGAwIogzRAgQIAAAQIECBAgQEBg+QECBAgQIECAAAECBAhEAgIrgjRDgAABAgQIECBAgAABgeUHCBAgQIAAAQIECBAgEAkIrAjSDAECBAgQIECAAAECBASWHyBAgAABAgQIECBAgEAkILAiSDMECBAgQIAAAQIECBAQWH6AAAECBAgQIECAAAECkYDAiiDNECBAgAABAgQIECBAQGD5AQIECBAgQIAAAQIECEQCAiuCNEOAAAECBAgQIECAAAGB5QcIECBAgAABAgQIECAQCQisCNIMAQIECBAgQIAAAQIEBJYfIECAAAECBAgQIECAQCQgsCJIMwQIECBAgAABAgQIEBBYfoAAAQIECBAgQIAAAQKRgMCKIM0QIECAAAECBAgQIEBAYPkBAgQIECBAgAABAgQIRAICK4I0Q4AAAQIECBAgQIAAAYHlBwgQIECAAAECBAgQIBAJCKwI0gwBAgQIECBAgAABAgQElh8gQIAAAQIECBAgQIBAJCCwIkgzBAgQIECAAAECBAgQEFh+gAABAgQIECBAgAABApGAwIogzRAgQIAAAQIECBAgQEBg+QECBAgQIECAAAECBAhEAgIrgjRDgAABAgQIECBAgAABgeUHCBAgQIAAAQIECBAgEAkIrAjSDAECBAgQIECAAAECBASWHyBAgAABAgQIECBAgEAkILAiSDMECBAgQIAAAQIECBAQWH6AAAECBAgQIECAAAECkYDAiiDNECBAgAABAgQIECBAQGD5AQIECBAgQIAAAQIECEQCAiuCNEOAAAECBAgQIECAAAGB5QcIECBAgAABAgQIECAQCQisCNIMAQIECBAgQIAAAQIEBJYfIECAAAECBAgQIECAQCQgsCJIMwQIECBAgAABAgQIEBBYfoAAAQIECBAgQIAAAQKRwAO1FwDKS8SRKwAAAABJRU5ErkJggg==

And then I have created a img tag and add this URL as the src of the image like below.

var imageFoo = new Image();
imageFoo.id = "testing-image";
document.body.appendChild(imageFoo);
imageFoo.src = dataUrl;

After this code image tag was appended at the end of the body and encoded URL also sets as src of the image tag.

But the image is not displaying. It only returns the blank image.

And I have some online base64 encoded to image tool, that also returns a blank image.

Anyone, please help me to diagnose the problem and give some best solution for this.

Are you sure that a) the canvas element contains data and b) you are targeting the correct canvas? It looks like the canvas is just blank. — NikxDa, Dec 27 '18 at 07:44
Can you add your canvas code? You may have some error there. — enxaneta, Dec 27 '18 at 09:06
@NikxDa, I'm targeting the correct canvas image and image also displaying. — Ramya, Dec 27 '18 at 09:09
In order to get some image out of this you need to draw something on your canvas. To test it make your canvas smaller get the canvas context using the [getContext("2d")](/https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext) and draw an [arc](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc) or some other shape. Only then convert your canvas `toDataURL` — enxaneta, Dec 27 '18 at 09:45

Vadim Hulevich · Answer 1 · 2018-12-27T08:52:40.567

0

After a little research i figure is you image absolute transparent and have size 856x201. I think problem with some layers in canvas and you just get a background only

edited Dec 27 '18 at 08:52

answered Dec 27 '18 at 07:47

Vadim Hulevich

1,803
8
17

Actually my original canvas image size as 856*201. If I got a background means, how can I get the canvas image URL. – Ramya Dec 27 '18 at 08:45
Need more details about how you create this canvas and on which step you get base64 – Vadim Hulevich Dec 27 '18 at 09:03
I'm not clear about the canvas creation concept. But I got the base 64 encoded URL from `canvas1[0].toDataURL("image/png");` – Ramya Dec 27 '18 at 09:08
try to inspect with develop console what exactly do you have inside your canvas – Vadim Hulevich Dec 27 '18 at 09:11
if you inspect canvas on this page https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_tut_path you can see image in dev console – Vadim Hulevich Dec 27 '18 at 09:13
I have added the inspected code in my question under HTML code. And have tried that w3schools example, but it doesn't return anything. – Ramya Dec 27 '18 at 09:16
and where js code? now it's just empty canvas – Vadim Hulevich Dec 27 '18 at 09:18
1

Now the issue has been solved. I got the canvas URL by `canvasside.toDataURL()`. And I could able to directly use the returned URL within the image tag. Thanks. – Ramya Jan 02 '19 at 12:21
You are welcome, i'm happy to help you) – Vadim Hulevich Jan 02 '19 at 13:01

Canvas to image base64 encoded url not showing image

1 Answers1