Heim > Artikel > Web-Frontend > Teilen Sie ein Beispiel-Tutorial zur Verwendung von h5 zum Aufrufen der Kamera zum Aufnehmen von Bildern

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

零下一度Original: 2017-05-31 15:20:395727Durchsuche

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>

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Teilen Sie ein Beispiel-Tutorial von localStorage in HTML5Nächster Artikel：Teilen Sie ein Beispiel-Tutorial von localStorage in HTML5

In Verbindung stehende Artikel

Mehr sehen