<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <img src="" alt="" /> <script type = "text/javascript"> function getBase64Image(img) { var canvas = document.createElement("canvas"); canvas.width = img.width; canvas.height = img.height; var ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, img.width, img.height); var dataURL = canvas.toDataURL("image/png"); return dataURL // return dataURL.replace("data:image/png;base64,", ""); } function main() { var img = document.createElement('img'); img.src = 'images/1 (2).jpg'; img.onload =function() { var data = getBase64Image(img); console.log(data); } document.body.appendChild(img); } main(); </script> </body> </html>