NetTalk Central

Author Topic: How to manipulate Camera PHOTO and display it  (Read 2633 times)

rjolda

  • Sr. Member
  • ****
  • Posts: 368
    • View Profile
    • Email
How to manipulate Camera PHOTO and display it
« on: May 12, 2025, 05:31:49 AM »
Hi All,
NT 14.21, C11
I am having the users take a photo of a document (e.g. drivers license) on a black background.  Thanks to Charles Edmund and ImageEx, he gave me a routine to remove the background and crop the picture so that I have only the document.  It is all code.  When the user takes a photo, I want to be able to snag it either before display in the NT webcam picture or I could give them a button to "modify it" and display it in another NT webcam picture.  I can save the camera image to disk and manipulate the saved file BUT, I want to grab the image in memory and manipulate it.   The take photo and display it appear to be javascript functions in all.js.
I have not played with javascript so I don't have a clue as to how to go about doing this in Javascript in an elegant fashion.  Basically, ImageEx can import the photo from a Handle of the Global Memory BLock holding the image or from a URL ( or a file on disk). 
So, anyone have any ideas about how to snag this image in memory and send it to Clarion Source code and return it to image in memory for display in the NT webcam field? 
The javascript code seems to be:
                  case 1:  //Take Pic   
            $('#' + id).on('click',function(e){_this.takeSnapshot(e)});
            break;   
and
// Load canvas
$.fn.getCanvasImage = function(type) {
   if (!this[0].toDataURL) {return null;}
   if (type === undefined) {
      type = 'image/png';
   } else {
      type = type
         .replace(/^([a-z]+)$/gi, 'image/$1')
         .replace(/jpg/gi, 'jpeg');
   }
   return this[0].toDataURL(type);
};

Anyone with good javascript skills who can shed some insight and maybe some code to manipulate the image?
Thanks,
Ron


Bruce

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 11310
    • View Profile
Re: How to manipulate Camera PHOTO and display it
« Reply #1 on: May 13, 2025, 06:48:18 AM »
I think you're over thinking this.
The Take Photo button takes the photo, and sends it to the server.
So you can process it however you like on the server.

The browser really only needs to update the displayed picture after processing.

We can chat in the webinar if you need more ideas.

Cheers
Bruce

osquiabro

  • Hero Member
  • *****
  • Posts: 702
    • View Profile
    • Email
Re: How to manipulate Camera PHOTO and display it
« Reply #2 on: May 13, 2025, 08:28:11 AM »
I have a button that rotate a image with ImageEx
 
If ThumbImage.iImage.Load(p_web.GSV('Loc:Path'))
    ThumbImage.iImage.Rotate(90)
    Loc:GuidFoto = st.MakeGuid() 
    ThumbImage.iImage.SaveAs(st.PathOnly(p_web.GSV('Loc:Path'))&'\'& clip(Loc:GuidFoto)&'.'&st.ExtensionOnly(p_web.GSV('Loc:Path')) )
    Loc:Path = st.PathOnly(p_web.GSV('Loc:Path'))&'\'& clip(Loc:GuidFoto)&'.'&st.ExtensionOnly(p_web.GSV('Loc:Path'))
    p_web.ssv('Loc:Path',Loc:Path)
    p_web.SetSessionValue('_save_Loc:Path',Loc:Path) 
    p_web.SaveFileToSession('Loc:Path','Mem:Foto')
   
   
End
loc:st_filename = '/uploads/'&clip(Loc:GuidFoto)&'.'&st.ExtensionOnly(p_web.GSV('Loc:Path'))
p_web.ssv('loc:st_filename',loc:st_filename)

rjolda

  • Sr. Member
  • ****
  • Posts: 368
    • View Profile
    • Email
Re: How to manipulate Camera PHOTO and display it
« Reply #3 on: May 13, 2025, 12:42:11 PM »
Hi,
That code looks like it will do just exactly what I need it to do.
Will check it out.
Thanks,
Ron