Exemple complet de capture et insertion d'image dans SQLite

Vous débutez et vous avez besoin d'aide ? N'hésitez pas à poser vos questions
Fels
Messages : 12
Inscription : ven. 04/mai/2018 21:04

Exemple complet de capture et insertion d'image dans SQLite

Message par Fels »

************************
** La page html : **
************************

Code : Tout sélectionner

<!DOCTYPE html> 
<html lang="fr">
<head>
    <title>Capture Webcam</title> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=yes">

	<script type="text/javascript">
	
	var mediaStream
	var base64Image
	
	function init() {

		navigator.mediaDevices.getUserMedia({ audio: false, video: { width: 800, height: 600 } }).then(function(mediaStream) {
			
			var video = document.getElementById('sourcevid');
			video.srcObject = mediaStream;
			
			video.onloadedmetadata = function(e) {
				video.play();
			};
		  
		}).catch(function(err) { console.log(err.name + ": " + err.message); });
	
	}

	function clone()
	{
		var vivi = document.getElementById('sourcevid');
		var canvas1 = document.getElementById('cvs').getContext('2d');
		canvas1.drawImage(vivi, 0,0, 320, 240);
		var base64 = document.getElementById('cvs').toDataURL("image/png");	//l'image au format base 64		
		base64Image = base64;
	}

	function stop() 
	{
		var video = document.getElementById('sourcevid');
		video.srcObject = mediaStream;
		
		video.onloadedmetadata = function(e) {				
			this.getVideoTracks().forEach(function(track) {
				track.stop();
				});
			};	
	}
	
		
	function Ajax()
	{
		
		var formData = new FormData();
		formData.append("tar", base64Image);
		
		var xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function() {
			if (this.readyState == 4 && this.status == 200) {			
				alert(xhttp.responseText);
			}
		};
	
		xhttp.open("POST", "../cgi-bin/CaptureAndInsertDBImage.exe", true);
		xhttp.send(formData);

	}


	window.onload = init;
	
	</script>
	
</head>

<body>
    
        <video id="sourcevid" width='320' height='240'  autoplay="true"  style='display:inline'></video>
		
		<div id="main" style='width:320px;height:240px;margin:auto;display:inline'>
		
        <canvas id="cvs" width='320' height='240' ></canvas>
		
		</div>
		
		<button onclick='clone()' style='height:50px;width:80px;margin:auto'>Capture</button>
		<button onclick='stop()' style='height:50px;width:80px;margin:auto'>Stop</button>			
		<button onclick='Ajax()' style='height:50px;width:80px;margin:auto'>Send</button>
</body>
</html>
 

***********************************
*** Maintenant le CGI Purebasic : **
***********************************

Code : Tout sélectionner

If Not InitCGI() Or Not ReadCGI()
  End
EndIf

Procedure.s GetBase64ForBlob(myBase64$) 
  
  UseSQLiteDatabase()
   
  mabase$ = "e:\photos.db"  
  
  If OpenDatabase(0, mabase$,"","")
        
  sql$ =  " INSERT INTO capture (photo) VALUES (?) "
      
      base64Length = StringByteLength(myBase64$, #PB_Ascii)
      
      *DecodeBuffer = AllocateMemory(base64Length + (base64Length / 2)  + SizeOf(character))  
      
      If *DecodeBuffer    
        
        *OutputBuffer = AllocateMemory(base64Length)      
        
        If *OutputBuffer        
          
          BytesPoked.i = PokeS(*DecodeBuffer, myBase64$, base64Length, #PB_Ascii | #PB_String_NoZero)
          
          If BytesPoked            
            
            ActualBytesDecoded = Base64Decoder(myBase64$, *OutputBuffer, base64Length)                
            
            If ActualBytesDecoded                  
              
              SetDatabaseBlob(0, 0, *OutputBuffer, Len(myBase64$) )                  
              DatabaseUpdate(0, sql$)                  
              
            EndIf                
            
          EndIf          
          
        EndIf      
        
      EndIf  
      
    EndIf
  
EndProcedure



WriteCGIHeader(#PB_CGI_HeaderContentType,"text/html",#PB_CGI_LastHeader)

image$ = CGIParameterValue("tar")
;nom$ = CGIParameterValue("nom")

Resultat = FindString(image$, ",") 
chaineToDel$ = StringField(image$, 1, ",")
Resultat$ = RemoveString(image$, chaineToDel$ + "," , 0,0,1 )

x = Len(Resultat$)

GetBase64ForBlob(Resultat$)

WriteCGIString("Envoie réussi !")
WriteCGIString( Chr(10)  )
WriteCGIString( "(" + x + ")" )

Avatar de l’utilisateur
djes
Messages : 4252
Inscription : ven. 11/févr./2005 17:34
Localisation : Arras, France

Re: Un exemple complet avec capture et insertion dans SQLite

Message par djes »

Chouette exemple ! Peux-tu donner un peu d'explications pour les débutants stp ? Merci :)
Fels
Messages : 12
Inscription : ven. 04/mai/2018 21:04

Re: Un exemple complet avec capture et insertion dans SQLite

Message par Fels »

Bonjour,
Je suis moi même débutant (donc adepte du copier coller et du bidouillage pour comprendre) et tout expliquer serait prétentieux et trop long.
Par contre, je peux en dire un peu sur certaines subtilités :

- L'image en Base64 au niveau du javascript est en globale

- le formulaire au niveau du javascript est créé à la volé

- Et j'utilise AJAX, le composant xmlHttpRequest (pour ceux que cela intéresse) qui permet d’interroger un serveur avec javascript
(Il a été créé par Microsoft, si mes souvenirs sont bons avec IE4, et à l' époque c'était pour décharger les serveurs et faire travailler plus les clients,
il s'agit du " coût " qui évolue avec le temps et l' évolution de la technologie).

- Pour cette partie du CGI :

Code : Tout sélectionner


Resultat = FindString(image$, ",") 
chaineToDel$ = StringField(image$, 1, ",")
Resultat$ = RemoveString(image$, chaineToDel$ + "," , 0,0,1 )

elle est très pratique pour un débutant comme moi, les buffer c'est un vrai casse tète, j'ai enlevé la " description " de l'image base64 pour ne garder que l'image et après cela a été simple de l’insérer avec SetDatabaseBlob, ou plutôt PB a accepté. Sans le petit " bidouillage " dont je viens de parler il m'était impossible de l'ajouter à la database.

Et tant qu' à faire si quelqu' un savait comment renvoyer une image à partir d'un CGI à une page HTML ca serait super.

Voilà.
Merci à tous pour votre aide, c'est grâce à vous que j'évolue de jour en jour.
:D
Avatar de l’utilisateur
djes
Messages : 4252
Inscription : ven. 11/févr./2005 17:34
Localisation : Arras, France

Re: Exemple complet de capture et insertion d'image dans SQL

Message par djes »

Merci ! Je me suis permis de corriger le titre pour mieux comprendre à quoi sert ton code. Tu n'es plus un débutant, puisque tu fais clairement la distinction entre page web, formulaires, client/serveur et base de données. Je pense que ton code sera obscur pour beaucoup pendant quelques temps ;)
Marc56
Messages : 2146
Inscription : sam. 08/févr./2014 15:19

Re: Exemple complet de capture et insertion d'image dans SQL

Message par Marc56 »

Et tant qu' à faire si quelqu' un savait comment renvoyer une image à partir d'un CGI à une page HTML ca serait super.
J'ai peut-être mal compris où est le problème ?

Une page HTML "normale" ne contient pas l'image encodée, mais le lien vers le le fichier sur le serveur, donc il faut que ton CGI l'extrait de la base SQL vers un répertoire du serveur puis mettent dans la page renvoyée au client un simple lien <IMG SRC= ... /IMG> par WriteCGIString()
Si c'est à usage unique, le même CGI l'efface après envoi puisqu'elle est alors dans le cache du navigateur client.

Penses à générer les images dans un répertoire avec quotas et script de ménage (ex: fichier plus vieux que x heures) pour éviter qu'on te sature ton serveur.

:wink:
Fels
Messages : 12
Inscription : ven. 04/mai/2018 21:04

Re: Exemple complet de capture et insertion d'image dans SQL

Message par Fels »

Je te remercie, j' ai utilisé cette méthode et elle marche.

Par contre sachant que l'accès au disque à un "coût ", peut être que cela peut t' intéresser, j'ai trouvé le moyen en javascript de transformer
une image base64 en Blob et ainsi de pouvoir la mettre directement la "src=" de l'image.

ici : https://stackoverflow.com/questions/162 ... javascript

Merci encore !
:)
Répondre