Question

116

Img url to dataurl using JavaScript

rated 0 times [ 119] [ 3] / answers: 1 / hits: 56284 / 10 Years ago, fri, september 5, 2014, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jonrened

Add To Favorites

Follow

Total Points: 627

Total Questions: 114

Total Answers: 99

Location: Zimbabwe

Member since Thu, Jul 21, 2022

2 Years ago

jonrened questions

1 Jest Received: serializes to the same string

Mon, Nov 2, 20, 00:00, 4 Years ago

1 Keeping placeholder on react-select

Tue, May 19, 20, 00:00, 4 Years ago

1 How to show the first item by default in a dynamic Antd form?

Sat, May 16, 20, 00:00, 4 Years ago

1 querySelectorAll to include self

Tue, Jan 21, 20, 00:00, 4 Years ago

1 Compare two nested array and objects for find difference

Thu, Nov 7, 19, 00:00, 5 Years ago

View All

answered 10 Years ago denver · Accepted Answer

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