1

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.

Improve this question
5
  • 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. Commented Dec 27, 2018 at 7:44
  • Can you add your canvas code? You may have some error there. Commented Dec 27, 2018 at 9:06
  • @NikxDa, I'm targeting the correct canvas image and image also displaying. Commented Dec 27, 2018 at 9:09
  • @enxaneta, I have added my canvas html code. Commented Dec 27, 2018 at 9:13
  • 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") and draw an arc or some other shape. Only then convert your canvas toDataURL Commented Dec 27, 2018 at 9:45

1 Answer 1

Reset to default
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 enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

Actually my original canvas image size as 856*201. If I got a background means, how can I get the canvas image URL.
Need more details about how you create this canvas and on which step you get base64
I'm not clear about the canvas creation concept. But I got the base 64 encoded URL from canvas1[0].toDataURL("image/png");
try to inspect with develop console what exactly do you have inside your canvas
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.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.