Page 1 of 1
How write captured image to mysql-field?
Posted: Tue Feb 02, 2021 10:44 am
by miasoft
I use example from here:
https://www.studytonight.com/post/captu ... avascript#
I get an image on the screen in the object #pic_display:
This is the part of proc CustomCode:
Code: Select all
function takepicture() {
var context = canvas.getContext('2d');
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
$('#pic_display').attr('src',data); // is OK - I see captured img
} else {
clearphoto();
}
But how can I write data from '#pic_display' to 'myfoto' (BLOB field in mySql table)?
Re: How write captured image to mysql-field?
Posted: Tue Feb 02, 2021 11:27 am
by kev1n
Hi,
Store the the image json in a separate text input (with ID pic_display_json) when saving the form:
Code: Select all
function nuBeforeSave() {
var f = $('#pic_display').val();
if (f !== '') {
$('#pic_display_json')
.val(f)
.change();
}
return true;
}
Also check out this article:
https://github.com/smalos/nuBuilder4-Co ... play_image
Re: How write captured image to mysql-field?
Posted: Tue Feb 02, 2021 1:13 pm
by miasoft
I get <empty string> in this point;
Code: Select all
$('#qui_editor').val(nn).change();
var f = $('#pic_display').val();
console.log(f); // get <empty string>
if (f !== '') {
$('#dsp_image_json')
.val(f)
.change();
} else {
console.log('No image');
}
Google says that it is a difficult task to convert image capture to a file or a field in the table.
Re: How write captured image to mysql-field?
Posted: Tue Feb 02, 2021 1:27 pm
by kev1n
Or save the data
Code: Select all
var data = canvas.toDataURL('image/png');
$('#dsp_image_json').val(data).change();
According to
https://developer.mozilla.org/en-US/doc ... /toDataURL it contains a DOMString.
Re: How write captured image to mysql-field?
Posted: Tue Feb 02, 2021 3:17 pm
by miasoft
Thanks, kev1n! Now I get URL-pictures string.
I view my picture in any Browser (Opera, FireFox ...) from this URL.
How can I view this pic in my EditForm?
I try:
1. Create 'myfoto' (HTML-obj) on the form
2. Insert code to HTML-tab:
Code: Select all
<script>
var img = document.getElementById('myfoto');
img.src = $('#dsp_image_json').val(); //'dsp_image_json' is table field where URL-string is saved
</script>
... and see nothing. What is wrong?
Re: How write captured image to mysql-field?
Posted: Tue Feb 02, 2021 3:23 pm
by kev1n
Re: How write captured image to mysql-field?
Posted: Tue Feb 02, 2021 4:46 pm
by miasoft
Yes, I check. I get error on parsing JSON.
The example and my program have completely different formats for 'dsp_image_json'
String from Sample is:
example.txt
String from my capture image is:
myEx.txt
The capture string in Browser:
02.02_1.png
Re: How write captured image to mysql-field?
Posted: Tue Feb 02, 2021 4:55 pm
by kev1n
Add a HTML Object with this HTML to your form:
Code: Select all
<div id="img_preview" style="width:250px; height:250px;"></div>
To view the image:
Code: Select all
var base64Image = 'data:image/png;base64,iVBORw0.........'; <-- replace with your base64 image
var $img = $("<img/>");
$img.attr("src", base64Image);
$("#img_preview").append($img);
Re: How write captured image to mysql-field?
Posted: Tue Feb 02, 2021 5:18 pm
by miasoft
Thank you very much, kev1n! Everything works perfectly!
