PHP+Javascript实现在线拍照功能实例,javascript实例
PHP+Javascript实现在线拍照功能实例,javascript实例
本文实例讲述了PHP+Javascript实现在线拍照功能。分享给大家供大家参考。具体如下:
我们在一些WEB应用中可能会遇到这样的情况,用户需要自己现场拍照并上传到会员系统。比如驾校采集指纹拍照流程、考试现场采集照片等。我们今天要讲的是如何使用javascript和PHP实现一个简单的在线拍照并上传的功能。
实现这个功能的前提是你的电脑设备上需要安装有摄像头设备,以及你的浏览器需要支持flash
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Javascript+PHP实现在线拍照功能</title> </head> <body> <div id="cam"> <!--调用摄像组件并显示图像--> <input type=button value="点击这里拍照" class="btn" onclick="take_snapshot()"> http://siteweb.com/sitemaps.xml </div> <div id="results"> <!--显示上传结果--> </div> </body> </html>
在body中加入一个用于调用摄像组件的容器id#cam和一个显示上传信息的容器id#results。
Javascript
接下来调用摄像组件,我们先载入webcam.js,用于拍照和上传的js库。
复制代码 代码如下:
然后在容器id#cam中,加入以下代码:
<script language="JavaScript"> webcam.set_api_url( 'action.php' ); webcam.set_quality( 90 ); // 图像质量(1 - 100) webcam.set_shutter_sound( true ); // 拍照时播放声音 document.write( webcam.get_html(320, 240, 160,120) ); </script>
我们调用了webcam,其中webcam.set_api_url用来设置图像上传交互的php路径,set_quality可设置图像质量,set_shutter_sound设置声音,get_html输出摄像组件,参数即宽度、高度、上传后宽度、上传后高度。
当点击按钮拍照时,需要执行以下代码:
<script language="JavaScript"> webcam.set_hook( 'onComplete', 'my_completion_handler' ); function take_snapshot() { document.getElementById('results').innerHTML = '<h4 id="Uploading">Uploading...</h4>'; webcam.snap(); } function my_completion_handler(msg) { if (msg.match(/(http\:\/\/\S+)/)) { var image_url = RegExp.$1; document.getElementById('results').innerHTML = '<h4 id="Upload-Successful">Upload Successful!</h4>' + '<img src="' + image_url + '" alt="PHP+Javascript实现在线拍照功能实例,javascript实例" >'; webcam.reset(); } else alert("PHP Error: " + msg); } </script>
当执行拍照动作时,代码与后台php交互,如果上传图片完成后,则返回相应的信息。
PHP
action.php所做的就是将本地拍照的图像上传到服务器,并将图片路径返回给前端。注意存放图片的路径要给写权限。
$filename = date('YmdHis') . '.jpg'; $result = file_put_contents( 'pics/'.$filename, file_get_contents('php://input') ); if (!$result) { print "ERROR: Failed to write data to $filename, check permissions\n"; exit(); } $url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/pics/' . $filename; print "$url\n";
这里只是简单的介绍了下在线拍照和上传功能,其实深入应用场景如上传后再裁剪,生成多张不同比例的图像等等,大家自己去琢磨吧。
希望本文所述对大家的php程序设计有所帮助。

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

In diesem Kapitel werden wir die Umgebungsvariablen, die allgemeine Konfiguration, die Datenbankkonfiguration und die E-Mail-Konfiguration in CakePHP verstehen.

PHP 8.4 bringt mehrere neue Funktionen, Sicherheitsverbesserungen und Leistungsverbesserungen mit einer beträchtlichen Menge an veralteten und entfernten Funktionen. In dieser Anleitung wird erklärt, wie Sie PHP 8.4 installieren oder auf PHP 8.4 auf Ubuntu, Debian oder deren Derivaten aktualisieren. Obwohl es möglich ist, PHP aus dem Quellcode zu kompilieren, ist die Installation aus einem APT-Repository wie unten erläutert oft schneller und sicherer, da diese Repositorys in Zukunft die neuesten Fehlerbehebungen und Sicherheitsupdates bereitstellen.

Um in cakephp4 mit Datum und Uhrzeit zu arbeiten, verwenden wir die verfügbare FrozenTime-Klasse.

Um am Datei-Upload zu arbeiten, verwenden wir den Formular-Helfer. Hier ist ein Beispiel für den Datei-Upload.

In diesem Kapitel lernen wir die folgenden Themen im Zusammenhang mit dem Routing kennen.

CakePHP ist ein Open-Source-Framework für PHP. Es soll die Entwicklung, Bereitstellung und Wartung von Anwendungen erheblich vereinfachen. CakePHP basiert auf einer MVC-ähnlichen Architektur, die sowohl leistungsstark als auch leicht zu verstehen ist. Modelle, Ansichten und Controller gu

Visual Studio Code, auch bekannt als VS Code, ist ein kostenloser Quellcode-Editor – oder eine integrierte Entwicklungsumgebung (IDE) –, die für alle gängigen Betriebssysteme verfügbar ist. Mit einer großen Sammlung von Erweiterungen für viele Programmiersprachen kann VS Code c

Der Validator kann durch Hinzufügen der folgenden zwei Zeilen im Controller erstellt werden.
