CODEWITHSUNDEEP
javascripthtmlimagedata-uri
adam0101
adam0101

Reputation: 31095

Img url to dataurl using JavaScript

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?

Upvotes: 25

Views: 68638

Answers (4)

user993683
user993683

Reputation:

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);
});

Upvotes: 45

&#194;ngelo Polotto
&#194;ngelo Polotto

Reputation: 9541

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);
});

Upvotes: 7

Liam
Liam

Reputation: 1768

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.

Upvotes: 1

Drew Faubion
Drew Faubion

Reputation: 461

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

Upvotes: 20

Related Questions