Img url to dataurl using JavaScript

Question

Using JavaScript, I want to convert an img tag like this:

<img width="11" height="14" src="http://mysite/file.gif" alt="File Icon">

Into one with a dataurl like this:

<img width="11" height="14" src="data:image/gif;base64,R0lGODlhCwAOAMQfAP////7+/vj4+Hh4eHd3d/v7+/Dw8HV1dfLy8ubm5vX19e3t7fr6+nl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsBtKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoThCKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7" alt="File Icon">

Is this possible?

possible duplicate of Convert image to base64 with javascript — Dalorzo
– Dalorzo, Commented Sep 5, 2014 at 16:59
I don't think it's a duplicate of that answer because he's downloading the binary data from the server and converting it to Base64. I'm trying to convert an absolute url to base64 on the client without downloading it a second time if possible. — adam0101
– adam0101, Commented Sep 5, 2014 at 17:05
@adam0101 But you have to download it once to convert the data. Then it wont be downloaded again with the base64 string. using base64 images prevents from downloading the images. — Romain Braun
– Romain Braun, Commented Sep 5, 2014 at 17:13
@RomainBraun, still, that question and answer converts a string to Base64. I don't have a string to convert, only a url. The btoa() function doesn't accept a url. — adam0101
– adam0101, Commented Sep 5, 2014 at 17:21

GROVER. · Accepted Answer · 2024-12-19 21:16:01Z

46

Here's how to get the data url of an image with fetch:

let blob = await fetch("https://example.com/image.png")
    .then(r => r.blob());

let dataUrl = await new Promise(resolve => {
    let reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.readAsDataURL(blob);
});

edited Dec 19, 2024 at 21:16

GROVER.

4,4082 gold badges31 silver badges78 bronze badges

answered Mar 4, 2018 at 8:50

user993683

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

3 Comments

S. Stark Over a year ago

This comes back as a data:text/html I am trying to get data:image/png

jdmayfield Over a year ago

Then replace the text/html with image/png in your string.

Chris Chiasson Over a year ago

Note that the example URL serves a web page rather than an image, so that is likely the problem rather than the code itself. @S.Stark

Community · Accepted Answer · 2017-05-23 11:57:15Z

21

First, load the image into a canvas

var canvas = document.createElement("canvas");
context = canvas.getContext('2d');

make_base();

function make_base()
{
  base_image = new Image();
  base_image.src = 'img/base.png';
  base_image.onload = function(){
    context.drawImage(base_image, 100, 100);
  }
}

Make sure to update the context.drawImage(base_image, 100, 100); to values appropriate for your application.

Source: https://stackoverflow.com/a/6011402/3969707

Then convert the canvas to data.

var jpegUrl = canvas.toDataURL("image/jpeg");
var pngUrl = canvas.toDataURL(); // PNG is the default

Source: https://stackoverflow.com/a/15685877/3969707

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered Sep 5, 2014 at 17:05

Drew Faubion

4713 silver badges12 bronze badges

1 Comment

adam0101 Over a year ago

Thanks! This worked great, but it turns out that if I include html2canvas with jsPDF it takes care of converting the images for me!

Ângelo Polotto · Accepted Answer · 2021-12-03 12:32:50Z

9

I'd solve this problem with a temporary canvas element with the same size of the image loaded:

function imageToUri(url, callback) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    var base_image = new Image();
    base_image.src = url;
    base_image.onload = function() {
        canvas.width = base_image.width;
        canvas.height = base_image.height;

        ctx.drawImage(base_image, 0, 0);
    
        callback(canvas.toDataURL('image/png'));

        canvas.remove();
    }
}

imageToUri('./assets/some_image.png', function(uri) {
    console.log(uri);
});

edited Dec 3, 2021 at 12:32

answered Apr 20, 2021 at 14:00

Ângelo Polotto

9,6612 gold badges41 silver badges40 bronze badges

2 Comments

NeoTechni May 12 at 14:44

Thank you for submitting actually reusable code. Most people don't and it bugs me

Ângelo Polotto May 23 at 20:39

No problem, I try to make the same way I wish to get.

Liam · Accepted Answer · 2014-09-06 15:29:49Z

1

This really isn't something you may want to do in JavaScript as it requires the image be parsed in JavaScript which is very slow. You would be loading the image and then putting the output of the function into the img tag, which doesn't save bandwidth, decrease complexity, or improve security.

Your best bet is to do this server-side. I've used this to great success in the past for generating pages which need to have absolutely no linked/referenced external resources. You can, for jsPDF, then use raw JavaScript or jQuery to get the data of an image to pass into the PDF creation process.

This will work everywhere and not rely on resorting to canvas which doesn't have full mobile browser support.

edited Sep 6, 2014 at 15:29

answered Sep 5, 2014 at 17:06

Liam

1,7681 gold badge17 silver badges32 bronze badges

2 Comments

DxTx Over a year ago

What if I stored that data on local storage? First I download the image, then I store it in users' local storage. Then users can load that image from their local storage. If the image is already downloaded, then the user can skip the downloading part which might increase the performance. Is this okay?

Liam Over a year ago

Browser caching handles this fairly well so you shouldn't in most applications need to store an image in local storage in most projects. If this is something that you're really looking to do there is another SO question that covers this pretty well. It uses canvas but that's available in all modern web browsers now: - stackoverflow.com/questions/19183180/…

Collectives™ on Stack Overflow

Img url to dataurl using JavaScript

4 Answers 4

3 Comments

1 Comment

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related