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

Google `SECURITY_ERR: DOM Exception 18`, one of the first hits you'll find is http://stackoverflow.com/questions/4913866/webkitnotifications-security-err-dom-exception-18-script-ok-button this question, most informative — Elias Van Ootegem, May 29 '12 at 11:09

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

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?

edited May 23 '17 at 12:27

Community

1
1

answered May 29 '12 at 11:11

jazzytomato

6,994
2
31
44

this error comes when i use a local file and as i said i cant use a server. plese give me another method to get data uri from local image. – Divam Gupta May 29 '12 at 11:26

Data URI from Image Javascript

1 Answers1