how to convert image url to dataurl (base64 data) with javascript

Question

how to convert image url to base64 encoded data url without using html5 canvas object.

canvas.todataURL()

I am gettting base64 data using canvas.todataURL, but it fails to read remote url's, so I want to convert my image url to dataurl with out using canvas.todataURL() and use it in my application.

HOw can I to do this.

You can actually use canvas.toDataUrl() with remote images if you use Cross-origin resource sharing. The browser support is still pretty poor though. — Strille
– Strille, Commented Sep 19, 2013 at 13:43
@Strille: Update--Good news! Actually, most modern browsers do support cross-browser XMLHttpRequests Good on: ie10,FF,webkit,ios,blackberry, Awkward implementation on: ie9, no support on: opera-mini. And of course ie<9 has no canvas support. Enabling cross-domain sharing on the server hosting your images can be tricky, but once set, you're good. Some "cloud" image servers like dropbox.com offer cross-domain by default. — markE
– markE, Commented Sep 19, 2013 at 17:14

Community · Accepted Answer · 2017-05-23 11:54:04Z

2

You can use this code-

HTML-

    <img id="preview" src="http://www.gravatar.com/avatar/0e39d18b89822d1d9871e0d1bc839d06?s=128&d=identicon&r=PG">
    <canvas id="myCanvas" />

javascript-

    <script>
     var c = document.getElementById("myCanvas");
     var ctx = c.getContext("2d");
     var img = document.getElementById("preview");
     ctx.drawImage(img, 10, 10);
     alert(c.toDataURL());
    </script>

found it here- How to get base64 encoded data from html image

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Mar 4, 2014 at 13:05

Mandeep Singh

1,0039 silver badges9 bronze badges

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

Comments

Strille · Accepted Answer · 2013-09-19 12:30:15Z

0

You can't do it purely in javascript without using canvas.toDataUrl(). You would have to do something server-side. Basically create a simple service which takes an url to an image as parameter and then returns that image as a base64 string.

answered Sep 19, 2013 at 12:30

Strille

5,7913 gold badges28 silver badges40 bronze badges

1 Comment

atluriajith Over a year ago

hmm... yes i did creating some service to send image url and return base64 string but in my application there is no chance to use any server side script, It is purely on html and javascript.. that is why I'm trying to do it on pure javascript..

Collectives™ on Stack Overflow

how to convert image url to dataurl (base64 data) with javascript

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related