Develop Reference

How can I convert an image into Base64 string from an image source?

I have found some answers related to the topic from How can I convert an image into Base64 string using JavaScript?. I realized they don't have an image on the div tag. Is it possible if I would have the image source?
Answer added for people who want to reference
function encodeImageFileAsURL() {
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
var newImage = document.createElement('img');
newImage.src = srcData;
document.getElementById("output").src = newImage.src;
alert("Converted Base64 version is " + document.getElementById("output").src);
console.log("Converted Base64 version is " + document.getElementById("output").src);
}
fileReader.readAsDataURL(fileToLoad);
}
}
<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<img src="https://mdbootstrap.com/img/Photos/Others/placeholder-avatar.jpg" id="output" width="100" height="100" style="border-radius: 50%;" />
I would like to use the image source to load the image and find out the base 64. Is it possible?
Besides using div to create 1 image out where it can't be customized.

I think you want to do this https://jsfiddle.net/samet19/yv9a4op8/
function encodeImageFileAsURL() {
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
var newImage = document.createElement('img');
newImage.src = srcData;
document.getElementById("output").src = newImage.src;
}
fileReader.readAsDataURL(fileToLoad);
}
}

convert image path to byte array javascript

i want to convert image to byte array javascript, here i have upload image from the gallery , below i mention what i have tried
<input type="file" name="images" id="fileUploadExactequipment" data-value="0" class="imageUpload1"> <span id="lblError" style="color: red;" onclick="imageValidation1(this);"></span></td><td>
var files = $('#fileUploadExactequipment')[0].files[0];
var exactImageByteArray= fileToByteConverter(files);
function fileToByteConverter(imagePath){
debugger
var reader = new FileReader();
var fileByteArray = [];
reader.readAsArrayBuffer(imagePath);
reader.onloadend = function (evt) {
if (evt.target.readyState == FileReader.DONE) {
var arrayBuffer = evt.target.result,
array = new Uint8Array(arrayBuffer);
for (var i = 0; i < array.length; i++) {
fileByteArray.push(array[i]);
}
}
return fileByteArray;
}
}
is this correct or not

AJAX convert image into ByteArray

I need to create a method to convert a image with AJAX to a ByteArray and send via AJAX to My API PHP.
Someone can help me?!
Thanks

Solution 1:
This is the sample code which is returning Bytes
Javascript :
<script type="text/javascript">
$(document).ready(function () {
$('#cmdUpload').click(function () {
uploadFile();
});
});
function uploadFile() {
var input = document.getElementById('objFile');
// var file = $("#objFile")[0].files[0];
var file = input.files[0];
fr = new FileReader();
fr.onload = receivedText;
//fr.readAsText(file);
fr.readAsDataURL(file);
}
function receivedText() {
var b64Data = fr.result.split(',');
var contentType = 'image/jpeg';
//document.getElementById('editor').appendChild(document.createTextNode(fr.result))
var byteCharacters = atob(b64Data[1]);
var byteNumbers = Array.prototype.map.call(byteCharacters,
charCodeFromCharacter);
var uint8Data = new Uint8Array(byteNumbers);
var blob = b64toBlob(b64Data[1], contentType);
var blobUrl = URL.createObjectURL(blob);
}
function charCodeFromCharacter(c) {
return c.charCodeAt(0);
}
function b64toBlob(b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 1024;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = Array.prototype.map.call(slice, charCodeFromCharacter);
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
for (var i = 0; i < byteArray.length; i++) {
alert(byteArray[i]);
}
}
</script>
HTML :
<div>
<input type="file" id="objFile" size="50" /><br />
<br />
<input type="button" id="cmdUpload" value="Upload" />
<div id="editor"></div>
</div>
Note: require Jquery library.
Hope it will help you.
Solution 2:
Reference link:
http://www.macaalay.com/2014/09/26/rendering-images-from-byte-arrays-and-converting-images-to-byte-arrays-using-angularjs/

How to convert an image into a Base64 string in a file?

I want to select multiple images and convert them to Base64 strings. I pushed the files into one array. My requirement is that after converting into Base64 strings, I want to push them into an array. I am not able to convert the images to Base64 strings.
$("input[name=property_images]").change(function() {
var names = [];
for (var i = 0; i < $(this).get(0).files.length; ++i) {
names.push($(this).get(0).files[i].name);
}
console.log(names);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="file" name="property_images" multiple="multiple" />

change your function to store the base64 value
$(document).ready(function(){
$("input[name=property_images]").change(function() {
var imgBase64Arr = [];
var files = this.files;
for (var i = 0; i < files.length; i++) {
(function(i){
var FR = new FileReader();
FR.onload = function(e) {
imgBase64Arr.push( e.target.result );//adding base64 value to array
if(i === files.length -1)//after all files are porcessed
submitData(imgBase64Arr)
};
FR.readAsDataURL(files[i]);
})(i);
}
});
function submitData(imgBase64Arr){
console.log(imgBase64Arr);
}
});

Here we have single image to convert base64 string.
function readFile() {
if (this.files) {
for(i=0;i<this.files.length;i++)
{
var FR= new FileReader();
FR.onload = function(e) {
//document.getElementById("img").src = e.target.result;
//document.getElementById("b64").innerHTML = e.target.result;
//$("#b64").append("<div></div>").html(e.target.result);
$('<img src="'+e.target.result+'" />').appendTo('#show-image');
$('<p>'+e.target.result+'</p>').appendTo('#text-image');
};
FR.readAsDataURL( this.files[i] );
}
}
}
document.getElementById("inp").addEventListener("change", readFile, false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="inp" type='file' multiple>
<div id='show-image'></div>
<div id='text-image'></div>

how to store multiple encoded values in multiple variables

I have given multiple upload file option but it is storing everything in one variable but i am not getting how to store seperate file encoded value in a seperate variable. It should create variable and store encoded value according to file upload.
<html>
<body>
<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" multiple />
<div id="imgTest"></div>
<script type='text/javascript'>
function encodeImageFileAsURL(index) {
var filesSelected = document.getElementById("inputFileToLoad").files;
index = index || 0;
if (filesSelected.length > 0 && index < filesSelected.length) {
var fileToLoad = filesSelected[index];
var fileReader = new FileReader();
fileReader.onloadend = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
var newImage = document.createElement('img');
newImage.src = srcData;
document.getElementById("imgTest").appendChild(newImage);
if (index < filesSelected.length) {
encodeImageFileAsURL(index + 1)
}
console.log(srcData);
}
fileReader.readAsDataURL(fileToLoad);
}
}
</script>
</body>
</html>

You may save the variable into an array, then access it whenever you want.
var sourceArray = new Array(); // put this before the function delaction
fileReader.onloadend = function (fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
sourceArray.push(srcData);
var newImage = document.createElement('img');
newImage.src = srcData;
document.getElementById("imgTest").appendChild(newImage);
if (index < filesSelected.length) {
encodeImageFileAsURL(index + 1)
}}
console.log(sourceArray);