How write captured image to mysql-field?

[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)?

[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

[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.

[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.

[miasoft]

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.

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?

[kev1n]

Check out the code: https://github.com/smalos/nuBuilder4-Co ... play_image
Function showEditImage()

[miasoft]

Check out the code: https://github.com/smalos/nuBuilder4-Co ... play_image

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

[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);

[miasoft]

Thank you very much, kev1n! Everything works perfectly!