convert an image into Base64 string using JavaScript

function getBase64Image(src, callback, outputFormat) {
      const img = new Image();
      img.crossOrigin = 'Anonymous';
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        let dataURL;
        canvas.height = img.naturalHeight;
        canvas.width = img.naturalWidth;
        ctx.drawImage(img, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        callback(dataURL);
      };

      img.src = src;
      if (img.complete || img.complete === undefined) {
        img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
        img.src = src;
      }
    }

View another examples Add Own solution

Log in, to leave a comment

4.44

9

Awgiedawgie 440220 points

                                    function encodeImageFileAsURL(element) {
  var file = element.files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
    console.log('RESULT', reader.result)
  }
  reader.readAsDataURL(file);
}
&lt;input type=&quot;file&quot; onchange=&quot;encodeImageFileAsURL(this)&quot; /&gt;

Thank you! 9

4.44 (9 Votes)

0

Are there any code examples left?

Find Add Code snippet

New code examples in category Javascript

Javascript 2023-04-21 22:52:36
Javascript 2022-03-27 22:25:20 javascript download string as file
Javascript 2022-03-27 21:40:22 sort numbers in array javascript
Javascript 2022-03-27 21:20:04 compare two arrays and return the difference javascript
Javascript 2022-03-27 21:15:02 javascript regex french phone number
Javascript 2022-03-27 21:05:03 cypress custom error message
Javascript 2022-03-27 21:00:05 create element javascript with id
Javascript 2022-03-27 20:40:57 feather icons react
Javascript 2022-03-27 20:20:01 how to make graphql request in axios
Javascript 2022-03-27 20:15:07 bootstrap validator password and confirm password

Create a Free Account

Unlock the power of data and AI by diving into Python, ChatGPT, SQL, Power BI, and beyond.

Develop soft skills on BrainApps

Complete the IQ Test

Relative searches

image base encode 64 javascript javascript read image and encode as base64 js How to convert an image to Base64 encoding how to get base64 string from image in javascript convert image to base 64 javascript how to convert image to base64 string in html and js js convert image from url to base64 js convert image from url to base 64 js img src from base64 convert base64 data to image javascript js image base 64 convert to normal image base 64 convert to normal js image on base 64 convert to normal js how to convert uploaded image into base64 in javascript how to convert image web url to base64 in javascript base64 image convert javascript how to convert string image into base64 string using javascript js save base64 image javascript create imagedata from base64 javascript create image data from base64 how to encode and decode image to base64 in javascript javascript select image and convert to base64 image load from base64 string in js javascript how to convert image to base64 image convert to base64 in javascript website for convert image to base64 javascript javascript convert upload image to base64 js large image to base64 base64 encoded image javascript base64 string to image encode example in javascript base64 image encode example in javascript base64 string to image URL javascript how to change base64 to image in js convert base64 string to jpeg image javascript how to convert base64 encoded string to image in javascript js image to base64 data data image base64 decode javascript convert base64 image url to image javascript convert image src path to base 64 string javascript convert image src to base64 string js convert image path to base64 string js img tag to base64 javascript base64 image to image javascript how to convert img file into base64 javascript convert jpeg to base64 javascript base64 string to image js javascript convert img tag to base64 how to convert imagedata to base64 javascript javascript convert string to base64 image convert image to bas64 based on url js image to bas64 javascript javascript convert image from url to base64 convert base64 string to image in javascript image to base 64 javascript how to convert image object to base64 javascript convert image file type to base64 url javascript encode image to base64 string javascript javascript convert image to base64 how to convert image to base64 in javascript from a path how to convert image to base64 in javascript with zdonis js javascript convert base64 image to url how to convert image path to base64 javascript javascript get base64 value of image how to create image from base64 in javascript convert image src to base64 js how to convert base64 data to image in javascript encode image to base64 js base64 encoding image javascript convert an image to base64 javascript base64 to image url js javascript return image to base64 string how to save base64 image in javascript turn image to base64 in js javascrip convet image uri to base 64 convert data:image/jpg;base64 in javascript image url from base64 data javascript online convert image to base64 javascript src image convert into base64 javascript convert base64 to image and send it in javascript convert to base64 javascript image image src to base64 javascript how to save a base64 to an image file javascript how to save an image from a base64 Javascript js base64 string to image javascript base 64 image to image file convert image to base64 javascript code convert image data array to base64 javascript convert to base 64 from img src javascript convert an image to base64 js javascript base64 image to src how to render an image from a base64 data in javascript javascript encode base64 img create image file from base64 string javascript javascript encode path to image to base64 javascript data:image/jpg;base64 save image base64 to image javascript convert image base64 to url in js converting images to base64 js image to base 64 js javascript url image to base64 how to convert base64 string into image in javascript base64 encode image url javascript imageURL to base64 javascript javascript image src from base64 javascript download image to base64 how to convert uploaded image to base64 in javascript decode image data into base64 using javascript encoding image to base64 javascript converter imagem para base64 javascript read image base64 javascript convert image heic to base64 error javascript turn image to base64 js function to change base64 to image using javascript base64 for image js image to base64 html js convert img to base64 javascript base encode 64 javascript image convert base64 image tooriginal image javascript convert file image to base64 javascript javascript img to base64 how to convert img to base64 string in js javascript save base64 image convert image to base64 javascript to payload image to base64 javascript online javascript convert image file to base64 How to convert base 64 image string to image in javascript javascript set img src to base64 string how to convert image data to base64 in javascript javascript make image from base64 string js comprise base64 image string convert img file to base64 javascript convert jpg to base64 string javascript convert image to base64 javascript filereader convert base64 in image js image link to base64 javascript convert base64 string to image file javascript javascript convert base64 image to image javascript base64 data uri to image convert image string to base64 javascript base64 encode image in javascript javascript get image by url and convert base64 javascript to base64 image convert base64 string to image javascript how convert image to base64 js image get base64 javascript convert image file into base64 javascript converting image file to base64 javascript encode image base64 js create image from base64 javascript transform image to base64 javascript convert base64 string into image javascript javascript base64 image encodeer how to save the image from url and convert to base64 js how to convert a base64 string to image in javascript convert from base64 to image i javascript how to convert image url to base64 in javascript convert image to base64 javscript javascript new image from base64 convert image to base64 uri and use in javascript convert image to base64 and use in javascript choose image and convert it into base64 javascript choose image convert to base64 using javascript red image from url and convert to base64 javascript convert image to base64 javascript online turn img into base64 javascript transfer img from img to base64 js js edit image through base64 js transfer image to base 64 js transfer image to base64 javascript download image by browser convert to base64 base64 encoded string to image js image to base64 converter javascript encode base64 javascript image convert base64 image to image file javascript image base64 js js convert local image to base64 convert image to base64 string js convert base64 to image javascript and display how to convert local base64 image to string in javascript how to convert local image base64 to string in javascript how to convert image base64 to string in javascript convert local image to base64 string in javascript convert image to base64 bytes in javascript how to convert image file to base64 string in javascript get base64 image bytes in javascript how to encode base64 image in javascript save image as base64 javascript new image file from base64 javascript base64 image change bytes javascript edit image base64 javascript javascript get base 64 from image file javascript pass image to base 64 read image file to base64 js how to convert base64 string into image in js get image name from base64 string in javascript how to convert base64 to image in js how to make base64 into image url in js how to base64 encode an image in javascript encode image url to base64 javascript javascript convert base64 to image image to base64 string in javascript base64 encode img data in js convert to an image to base64 javascript js save image from base64 convert base64 back to image javascript convert image base64 url to string javascript convert local image to base64 javascript with name convert img to base64 js convert image into base64 in javascript get image from base64 string javascript get image type from base64 string javascript convert a image to base64 javascript save base64 img javascript Local image to base64 JavaScript encode image base64 javascript javascript create image base64 javascript create image from base64 string javascript string to base64 image javascript upload image and convert to base64 read image in base64 javascript get base64 from image js javascrpt convert url image to base64 javascript convert image url to base64 javscript iamge link to base64 image from base64 js send image as base64 javascript Convert image to base64 javascript large convert image to base 64 js new Image() from base64 js js get base64 from img change image to base64 javascript use of base64 encoding for images in javascript js-base64 encode image convert base64 image to url js turn base64 image into image js javascript get image from url and convert to base64 js convert image url to base64 convert image to base64 javascript base64 image javascript js write base64 to image javascript turn image to base64 javascript turn image into base64 javascript code to convert img tag to base64 how to decode base64 image to images javascript encode image to base64 jhs obtain image from base64encode string javascript obtain image from base64encode javascript convert image from base64 javascript create an image from image base 64 js ask and convert image to base64 js javascript image from base64 Javascript Encode image in Base64 how to convert base64 to image file in javascript javascript image from url to base64 how convert image file in base64 with javascript how convert a image in base64 with javascript convert imag to base64 from dom base64 image encode javascript javascript convert image to base64 string convert img from dom to base64 js javascript convert image to base64 from URl javascript convert to base64 image convert image to base64 with js show image using base64 in javascript image url into base64 javascript change image into base64 javascript url image to base64 javascript capture image and convert it to base64 js js image file to base64 javascript image from base64 str how to download and convert image into base64 string using javascript js base64 image base encode image js js image url to base64 how to convert img to base64 with js? get image from url and convert to base64 javascript how to convert base64 string to image in javascript js base64 encode image convert image from dom to base64 how to assign image of base64 to a variable in javascript image url to base64 js javascript image file to base64 how to save base64 as jpeg image to local using javascript javascript convert image buffer to base64 javascript encode image to base 64 how to send convert base64 image data in jpeg in javascript base64 to image base64 javascript image base64 javascript how to convert an image to base64 in javascript convert image url to base64 in javascript using local source convert image location to base64 in javascript using local source convert image to base64 in javascript using local source convert image to base64 in javascript function assign to variable convert image to base64 in javascript function decode image to base64 javascript how to display image from base64 string in javascript how to convert image to base64 using javascript convert image to base64 on reader javascript javascript upload image convert to base64 how to convert image into base64 in javascript upload image and convert to base64 javascript javascript image convert to base64 how to convert image from windows to base64 in javascript js image to base64 url convert image to base64 string javascript with url how image to base64 js image convert to base64 js javascript code encode image to base64 from url javascript display image from base64 string javascript image base64 convert image to base64 in js how to encode an image in base64 javascript encode base64 image javascript base64 js image javascript image url to base64 convert image from url to base64 javascript image url to base64 javascript javascript show image from base64 convert multiple image to base64 javascript without canvas choose and convert image to base64 javascript get image base64 in js how to convert dom image to base64 convert uploaded image to base64 javascript image file to base64 javascript how to get base64 from image in javascript decode encode base64 javascript images convert jpg to string from images from path ./image javascript canvas ase64 image javascript filereader image to string js code js url image to base64 how to decode base64 string to image in javascript javascript function to convert image to base64 step convert image into base64 javascript convert base64 image to jpg javascript base64 to jpg javascript replace data:image/jpeg;base64 from base64 string javascript convert image to string in js image.onload return base64 url in js filereader covert jpg to string convert image base64 javascript js convert img to string js convert base64 to image convert image url to base64 javascript convert a div text block into base64 image js convert a text block into base64 js image to base64 javascript func base64 in front of a img javascript convert jpg to string base64 in javascript turn images to data javascript converting image to base64 javascript base64 encode jpg javascript convert image file to base64 string javascript convert image file to base64 js convert image to base64 string in javascript javascript base64 image url encode function encode image to base64 javascript function encode image to bse64 javascript function convert image data to base64 encoder javascript javascript get base 64 image then js generate base64 image image object to base64 javascript convert image in base64 javascript turn image into base64 js javascript load base64 encoded image to display convert local image to base64 javascript convert base64 to image file using javascript create image from base64 using javascript convert base64 to image javascript and download convert jpg to string javascri t convert jpg to string display jpg from server javascript convert jpg png to string from server database javascript convert jpg png to string javascript from server convert png image to base64 string in node js How to convert image into base64 string using JavaScript? nodejs base64 image to image javascript save base64 image to file javascript image as base64 from file how to convert an image to base64encodedimage in javascript convert image tag src to base64 javascript convert image source to base64 js convert image source to base 64 js convertir base64 a imagen javascript console log data url base64 image to base64 in javascript js convert gif string to file convert jpg to base64 javascript image from file to base64 string javascript image to base64 string javascript image to base64 javascript example js create base64 image create src from base64 string javascript using base64 images in to javascript base64encode in js image image to base64 javascript scr= js library convert image source url to base64 how to convert image source tobase64 convert image to icon typescript Get image from base64 string in Javascript base64 like image javascript Convert Your Image to Base64 api how to convert base64 to image in javascript how to convert image file to base64 in javascript decode from frontend bas64 img // Logo converted to base64 js img to base64 converter js how to convert image to string in javascript FileReader() how to convert image to string in javascript base64 string to image javascript base64 to image javascript javascript convert image to base 64 js convert image to base64 string js convert img to base64 base64 to image js js image data to base64 convert input image to base64 javascript base64.encode image in javascript javascript function image encode base64 js base64 to image js read external image file as base64 jpeg base64 javascript convert base64 to image javascript base64 image to text javascript javascript return base64 of image javascript get base64 of image convert image to javscirpt javascript encode base64 image convert image to base64 javascrip img to base64 js js convert img src to base64 javascript src to base64 javascript convert image src to base64 javascript get image in base64 nodejs read file as base64 to <img src /> javascript png file to base64 base64 encode image js javascript generate base64 out of canvas javascript convert image to base54 js image 64 from link how to convert png file into base64 encoder using typescript javascript get base 64 url from event js codes change image to base64 js encode image to base64 js encode png image to base64 javascript encode image convert image to string in javasctipt ways to convert image to base64 javascript unction toDataURL(url, callback) create base64 image javascript convert image to base64 string javascript img onload convert base64 image onload get base64 jpg to base64 + javscript js image get base64 convert image to base64 in javascript js encode image base64 js get base64 from image convert img tag to base64 javascript javascript base64 image convert image data to base64 javascript javascript base64 jpeg javascript recieve base64 image return image javascript from base 64 base64 encode image javascript how to share base64 image in html jav convert image response to base64 javascript how to convert image to base64 string in javascript js jpg to base64 convert img src to base64 javascript how to convert to string a image src javascript get image from src img and conver it to base64 using javascript encode image from src to base64 string javascript get base64 from image javascript image to base64 using javascript base64 encode image in javascript decode convert dataurl to base64-encoded string convert dataurl to base64 Encoded string get base64 of image javascript how to encode an image into base64 in javascript base64 image encoder javascript encode image file in js how to turn img tag to base64 get image by base64 js convert image file to base64 javascript convert image to base64 encoded string javascript open image from imageurl data:image/jpg;base64 javascript javascript load image from url to base64 javascript to convert image to base64 convert image into base64 javascript convert png to base64 js image to string javascript convert image to base64 js how to convert string data url to image in javascript how to convert an image-string to picture src how to convert an image string to src js-base64 image base64 encode image library javascript base 64 to image code in js how to convert png to base64 javascript js png to base64 string js image to base64 js image base64 canvas base64 image converter javascript file url to base64 javascript comnvert image to base 64 javascript get image base 64 javascript convert image data to base64 convert image to string javascript javascript encode image to base64 conver image ti base 64 js javascript convert image to base64 javascript how to integrate the image to base64 converted image in the javascript how to integrate the image to ase 64 converted image n the javascript js base 54 to img convert image into base64 string javascript js to base64 image create image out of base64 javascript get image from base64 javascript javascript imagedata to base64 how to get image base64 data in js on change event javascript base64 encode image image to image encoding js convert png file to base64 javascript src to base64 js convert to jpeg/base64 string javascript javascript todataurl image 64 bit how to convert an uploaded image in html to a 64bit string in javascript how to return base 64 version of image js javscript convert image to base64 converting remote file to base64 angular typescript convert UTF-8 encode image to image get image base64 javascript javascript convert png to bas 64 convert base64 encoded to image javascript decode a base64 encoded image javascript javascript parse image file to string easy image to base 64 javascript convert png to base 64 javascript png to base 64 javascript how to convert image into base64 string using javascript javascript image to base64 js image png to base64 js base64 from image convert png to base javascript get base64 string from image javascript png to base64 js js load image to base64 get image path from base64 encoded string in javascript png to base64 javascript javascript convert image to base64 image to base64 js encode image to base64 javascript encode and decode image to base64 javascript how to get image from base64 string in javascript how to convert and save base64 data into jpg images in vanilla js how to convert image to base64 in javascript convert raw png to base64 js convert png to base64 javascript javascript canvas convert image to base64 js convert image to base64 img to string javascript convert image to base64 using javascript get base64 string from data uri javascript if data url or base64 javascript file url to base64 javascript convert image to base64 javascript js image to base64 image to base64 javascript example image base64 string convert image to base64 image c# how to encode a string using the base64 convert string to encryption in php convert an image into Base64 string using JavaScript

Made with love

Welcome Back!

Sign up to unlock all of IQCode features:

Test your skills and track progress
Engage in comprehensive interactive courses
Commit to daily skill-enhancing challenges
Solve practical, real-world issues
Share your insights and learnings

Create an account

Create a Free Account

Sign up to unlock all of IQCode features:

Test your skills and track progress
Engage in comprehensive interactive courses
Commit to daily skill-enhancing challenges
Solve practical, real-world issues
Share your insights and learnings

Create an account

Creating a new code example