Data URI from Image Javascript

Question

I want to create an Data URI from a local image by totally using javascript

Can somebody javascript suggest a function to convert a local image.

i used canvas to load image and convert to data uri

 function load() {
   var can = document.getElementById('canvas'); 
   var ctx = can.getContext('2d'); 
   var img = new Image(); 
   img.onload = function () {
     can.width = img.width; 
  can.height = img.height; 
  ctx.drawImage(img, 0, 0, img.width, img.height); 
  var canvasData = can.toDataURL("image/png"); 
  alert( canvasData); 
  }
   img.src = 'http://www.smallbiztechnologies.net/smbiztech/wp-    content/uploads/2011/11/Click-To-Call-Icon.png'; 
   }

but its throwing the following error

SECURITY_ERR: DOM Exception 18

please suggest how to do whis without using a server side script

thank you

Answer 1

the image you want to draw is from a different domain than yours, so a security error is thrown.

Please see the following topic for further explainations Why does canvas.toDataURL() throw a security exception?