Teilen Sie ein Beispiel-Tutorial zur Verwendung von h5 zum Aufrufen der Kamera zum Aufnehmen von Bildern-H5-Tutorial-php.cn

Teilen Sie ein Beispiel-Tutorial zur Verwendung von h5 zum Aufrufen der Kamera zum Aufnehmen von Bildern

零下一度

Freigeben： 2017-05-31 15:20:39

Original

5755 Leute haben es durchsucht

Die Technologie schreitet ständig voran. Auch unsere Bedürfnisse ändern sich ständig. Während der Entwicklung sind wir kürzlich auf das Problem gestoßen, dass Benutzer bei der Registrierung eines Kontos ein persönliches Bild benötigen und die Website eine automatische Fotoaufnahmefunktion bietet. Außerdem müssen Sie nach der Anmeldung am Computer beim Anmelden am Mobiltelefon nur den QR-Code auf dem Computer scannen, um sich anzumelden. Das ist für ein Netzwerk äußerst schwierig. Der technologische Fortschritt hat uns zu HTML5 gebracht. Die folgende einfache und grobe Demonstration besteht darin, diese Funktionen direkt durch einen Blick auf den Code auszuführen:

 <！DOCTYPE html>  
    <HTML>  
    <HEAD>  
        <TITLE> HTML5调用摄像头实现拍照</ TITLE>  
        <meta charset =“utf-8”>  
        <meta name =“viewport”content =“width = device-width，initial-scale = 1”>  
    </ HEAD>  
    <BODY>  
    <video id =“video”autoplay =“”style =&#39;width：640px; height：480px&#39;> </ video>  
    <button id =“paizhao”>拍照</ button>   
    <canvas id =“canvas”width =“640”height =“480”> </ canvas>  
    <script type =“text / javascript”>  
        var video = document.getElementById（“video”）;  
        var context = canvas.getContext（“2d”）;  
        var errocb = function（）{  
            console.log（“sth srong”）;  
        }  
        如果（navigator.getUserMedia）{  
            navigator.getUserMedia（{ “视频”：真}，函数（流）{  
                video.src =流;  
                video.play（）;  
            }，errocb）;  
        } else if（navigator.webkitGetUserMedia）{  
            navigator.webkitGetUserMedia（{ “视频”：真}，函数（流）{  
                video.src = window.webkitURL.createObjectURL（流）;  
                video.play（）;  
            }，errocb）;  
        }  
        的document.getElementById（ “paizhao”）的addEventListener（ “点击”，函数（）{  
            context.drawImage（视频，0,0,640,480）;  
        }）;  
    </ SCRIPT>  
    </ BODY>  
    </ HTML>

Nach dem Login kopieren

[Verwandte Empfehlungen]

1 . Detailliertes Beispiel für die Implementierung der Kamerafunktion über H5 >HTML5-Programmierung

Teilen des Implementierungscodes der benutzerdefinierten HTML5-Maske

Detaillierte Einführung in die Grafik- und Textdetails der Verwendung von HTML5 Kamera zum Aufnehmen von Fotos in AngularJS

Das obige ist der detaillierte Inhalt vonTeilen Sie ein Beispiel-Tutorial zur Verwendung von h5 zum Aufrufen der Kamera zum Aufnehmen von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!