jquery - how to convert image url to dataurl (base64 data) with javascript - Stack Overflow

admin管理员组

文章数量:1334393

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.

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.

• javascript
• jquery
• html
• canvas
• html5-canvas

Share Improve this question Follow asked Sep 19, 2013 at 12:19 atluriajithatluriajith 79233 gold badges1717 silver badges4242 bronze badges 2

• 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 Commented Sep 19, 2013 at 13:43
• 1 @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. offer cross-domain by default. – markE Commented Sep 19, 2013 at 17:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You can use this code-

HTML-

    <img id="preview" src="http://www.gravatar./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

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.

本文标签： jqueryhow to convert image url to dataurl (base64 data) with javascriptStack Overflow