Page 1 of 2
Displaying a Base64 image in a form ...
Posted: Sat Mar 19, 2022 7:28 pm
by Mr71
I have a base64 string that I use to successfully display an image stored in the db within an html page ... is it possible to display the string with an object within a nubuilder form ?!
Re: Displaying a Base64 image in a form ...
Posted: Sun Mar 20, 2022 11:04 am
by kev1n
Hi,
Use an image object, then assign the base64 string to it's src.
Code: Select all
$("#imgId").attr('src', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==');
Re: Displaying a Base64 image in a form ...
Posted: Sun Mar 20, 2022 2:20 pm
by Mr71
Hi Kevin
with the image object (I guess I have to set the custom code [onnuload]) the string of your example comes out as shown in the photo. I would like to display album covers (300 x 300 jpeg/png), with the html object they display fine (with the img tag), but I don't know how to connect the string base64 contained in the database field. I don't know if another solution is possible (not with json string which I know is in the snippets code and it works great on nubuilder)
... thank you very much as always ...
Re: Displaying a Base64 image in a form ...
Posted: Mon Mar 21, 2022 7:37 am
by kev1n
Use a html object that contains a img tag.
Replace #objectid# with the nuBuilder object id that contains the base64 string.
Code: Select all
<img src= "data:image/png;base64,#objectid#" width="300" height="300">
Re: Displaying a Base64 image in a form ...
Posted: Tue Mar 22, 2022 9:28 am
by Mr71
Yes, it works well, thanks Kevin
!! Is there a solution to store the base64 image string with the file browser (
directly on the image without using external converters !?). It is not essential but it would be very convenient ...
Re: Displaying a Base64 image in a form ...
Posted: Tue Mar 22, 2022 9:48 am
by kev1n
If you use a file object,
add an event listener to it, convert the file to a base64 string and assign it to the nuBuilder (text) object.
Re: Displaying a Base64 image in a form ...
Posted: Mon Apr 18, 2022 10:29 am
by Mr71
I deepened your advice and found this system to be able to insert a base64 encoded image. If I use in a HTML object the code below works fine but I don't know how to write the encoding in the database field.
If I use a "procedure"
nuRunPHP('obj_base64','iframe_c_html',0); in form properties linked with an html object (with the tag for iframe in html tab:
<iframe id = 'iframe_c_html' title="" width="1400" height="600">) to use php, the code seems to work only for the html part (open browse window and show only text <p> tag, not id "64" and"img"), leaving out the javascript part, so I don't see the result. what's the problem?! Where am I wrong !?
This is the code:
Code: Select all
echo '<script>
function readFile() {
if (this.files && this.files[0]) {
var FR= new FileReader();
FR.addEventListener("load", function(e) {
document.getElementById("img").src = e.target.result;
document.getElementById("b64").innerHTML = e.target.result;
});
FR.readAsDataURL( this.files[0] );
}
}
document.getElementById("inp").addEventListener("change", readFile);
</script>';
echo ('
<p> *** IMAGE *** <p>
<input id="inp" type="file">
<p id="b64"></p>
<img id="img" height="300" witdh="300">
');
Re: Displaying a Base64 image in a form ...
Posted: Mon Apr 18, 2022 12:50 pm
by kev1n
Can't you place the code in the form's custom code? (without echo)
Re: Displaying a Base64 image in a form ...
Posted: Mon Apr 18, 2022 6:38 pm
by Mr71
so it works, (I see the encoding and image on the html object) but how do I pass the base64 encoding to the database field !?
Re: Displaying a Base64 image in a form ...
Posted: Mon Apr 18, 2022 6:51 pm
by kev1n
Store the base64 field in a nuBuilder text object (e.g. with object id "base_64" that is on the form.)
Like that:
Code: Select all
nuSetValue('base_64', e.target.result);