Skip to content

Instantly share code, notes, and snippets.

@nateous

nateous/convert_image_to_base64.html

Created June 4, 2018 17:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nateous/f063f7632b0634f9ac74db5e3d730a74 to your computer and use it in GitHub Desktop.
Save nateous/f063f7632b0634f9ac74db5e3d730a74 to your computer and use it in GitHub Desktop.
Download ZIP
So I don't have to keep uploading images to websites I don't trust...
Raw
convert_image_to_base64.html
<!DOCTYPE html>
<html style="height:100%;">
<head>
<meta charset="utf-8" />
<title>Convert an image to base64</title>
</head>
<body style="display:flex;flex-direction:column;align-items:stretch;">
<input type="file" />
<textarea readonly style="flex:1 1 auto;"></textarea>
<script type="text/javascript">
//taken from: https://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript
document.addEventListener('change', function (e) {
var reader = new FileReader();
reader.onload = function (event) {
var img = new Image();
img.onload = function () {
var canvas = document.createElement('CANVAS');
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
}
document.querySelector('textarea').value = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}, false);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment