Get Image Data Url in JavaScript

Get image data URL in JavaScript?

Note: This only works if the image is from the same domain as the page, or has the crossOrigin="anonymous" attribute and the server supports CORS. It's also not going to give you the original file, but a re-encoded version. If you need the result to be identical to the original, see Kaiido's answer.

---

You will need to create a canvas element with the correct dimensions and copy the image data with the drawImage function. Then you can use the toDataURL function to get a data: url that has the base-64 encoded image. Note that the image must be fully loaded, or you'll just get back an empty (black, transparent) image.

It would be something like this. I've never written a Greasemonkey script, so you might need to adjust the code to run in that environment.

function getBase64Image(img) {
    // Create an empty canvas element
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to
    // guess the original format, but be aware the using "image/jpg"
    // will re-encode the image.
    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

Getting a JPEG-formatted image doesn't work on older versions (around 3.5) of Firefox, so if you want to support that, you'll need to check the compatibility. If the encoding is not supported, it will default to "image/png".

create data url from fetched image

Thanks for the suggestion @dolpsdw. window.btoa doesn't do what I thought it would. If anybody is trying to do the same thing, instructions for reading a blob into a data url are here: https://stackoverflow.com/a/18650249/5203563

I have created this wrapper that fits right into my program as follows:

(it even adds in the data:image/jpeg;base64, part for you and works out the mime type from the blob)

  function readBlob(b) {
    return new Promise(function(resolve, reject) {
      const reader = new FileReader();

      reader.onloadend = function() {
        resolve(reader.result);
      };

      // TODO: hook up reject to reader.onerror somehow and try it

      reader.readAsDataURL(b);
    });
  }

  async function ajax(id) {
    const tag = document.getElementById(id);
    const path = tag.getAttribute("data-src");
    const response = await fetch(path);
    const blob = await response.blob();
    // const base64 = window.btoa(blob);
    // const content = `data:image/jpeg;base64,${base64}`;
    const content = await readBlob(blob);
    tag.setAttribute("src", content);
  }

this gives me the much longer data url that I expected:

Img url to dataurl using JavaScript

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

How do i get image data from external url - and return colors

Thanks for your comments! I got it working now with the callback function :-)

function getpalette(colors) {
        $("#clusters").empty().append("<div>calculating colors...</div>");
        kmeans_paint.clusterColors(colors, k);
    }

$(".kmeans-error-button").click(function() {
    k = $(this).attr("data-k-e");

    if (!colors) {   
        getImageColors(getpalette);
    }
}) 

function getImageColors(callback) {
  var img = new Image();  
  img.setAttribute('crossOrigin', 'anonymous');
  img.onload = function () {

  var width = img.width;
  var height = img.height;

  var canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  var context = canvas.getContext("2d");
   context.drawImage(img, 0, 0);

  var data = context.getImageData(0, 0, width, height).data;
  var colors = [];
  for(var x = 0; x < width-12; x += 3) {
    for(var y = 0; y < height-12; y += 3) { // sample image, every 3rd row and column
     var offs = x*4 + y*4*width;
     var color = [data[offs + 0], data[offs + 1], data[offs + 2]];
     colors.push(color);
    }
  }
  callback(colors);
  }
img.src=document.getElementById("test-image").src;
}

JS Get image directly from video stream as data url

Here, canvas maintains the original 640x480 snapshot (use https fiddle for Chrome):

var start = () => navigator.mediaDevices.getUserMedia({ video: true })

  .then(stream => video.srcObject = stream)

  .catch(log);

var canvas = document.createElement("canvas");

canvas.width = 640;

canvas.height = 480;

var snap = () => {

  canvas.getContext('2d').drawImage(video, 0, 0, 640, 480);

  preview.getContext('2d').drawImage(canvas, 0, 0, 160, 120);

}

var log = msg => div.innerHTML += "<br>" + msg;

<button onclick="start()">Start!</button>

<button onclick="snap()">Snap!</button><div id="div"></div>

<video id="video" width="160" height="120" autoplay></video>

<canvas id="preview" width="160" height="120"></canvas>

---

Related Topics