<!DOCTYPE html>

<html>

	<head>

		  <meta charset="UTF-8">

    <title>欢迎系统</title>

		<link type="text/css" rel="stylesheet" media="screen" href="page.css" />

		<title>Photobooth.js</title>

	</head>

	<body>

		<div id="wrapper">

			<h1>

				<a name="Demo">HTML5 Webcam for your website</a>

			</h1>

			<div id="example"></div>

			<div id="gallery"></div>

			<div class="tab_container">

					<div class="tab_content standalone">

                       <code>

container = document.getElementById( "example" );

gallery = document.getElementById( "gallery" );

myPhotobooth = new Photobooth( container );

myPhotobooth.onImage = function( dataUrl ){

	var myImage = document.createElement( "img" );

	myImage.src = dataUrl;

	gallery.appendChild( myImage );

};

        </code>

				</div>

			</div>

			<!--

			<h2><a name="dataUrl">Storing dataUrls as image</a></h2>

			The user clicked the camera icon, your <code>onImage()</code> function get's called and receives a dataUrl... now what?

			<h3>In the Browser</h3>

			<h3>Sending the image to the server</h3>

			<h3>Storing the image on the server</h3>

			Storing your dataUrl as an image is easy when you know how. A dataUrl consists of two parts, seperated by a come: a meta-data section at

			the start and the actual data

			<code>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAA...</code>

			The String after the comma is base64 encoded binary data. So in order to save it as an image you need to

			1) Split the dataUrl on the first comma

			2) base64 decode the data ( emphasize on DECODE, not encode )

			Every major serverside language has a built in way of doing that. E.g.

			PHP

			$dataUrlParts = explode( ",", $dataUrl);

			base64_decode( $dataUrlParts[ 1 ] );

			Node.js

			var dataUrl = "data:image/jpeg;base64,/9j/4AAQSkZJRgA...";

			var buffer = new Buffer( dataUrl.split( "," )[ 1 ], 'base64');

			require( "fs" ).writeFileSync( "image.jpg", buffer.toString( 'binary' ), "binary" );

			3) Save the result to a file and name it yourImage.png ( or jpeg, depending on the dataUrl type )

		-->

		</div>

 <!-- Insert this line above script imports  -->

    <script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>

    <!-- normal script imports etc  -->

    <!-- Mainly scripts -->

		<script type="text/javascript" src="jquery.js"></script>

		<script type="text/javascript" src="photobooth_min.js"></script>

		<script type="text/javascript" src="script.js"></script>

 <!-- Insert this line after script imports -->

    	<script>if (window.module) module = window.module;</script>

	</body>

	<script>

    // You can also require other files to run in this process

    require('./renderer.js')

  </script>

</html>

electron photobooth.js的更多相关文章

  1. photobooth.js

    HTML5 Webcam for your website, photobooth.js

  2. 基于HTML5实现的超酷摄像头（HTML5 webcam）拍照功能 - photobooth.js

    在线演示 WebRTC可能是明年最受关注的HTML5标准了,Mozilla为此开发了一套帮助你控制硬件的API,例如,摄像头,麦克风,或者是加速表.你可以不依赖其它的插件来调用你需要的本机硬件设备. ...

  3. electron node.js 在 vscode 设置 调试 Debug

    在当前工程下,添加一个 .vscode/launch.json 文件 { // Use IntelliSense to learn about possible attributes. // Hove ...

  4. electron node.js 实现文件拖动读取文件

    css/styles.css .for_file_drop { width: 100%; height: 100px; background-color: blueviolet; } index.ht ...

  5. photobooth.js jquery

    <div id="example" class="photobooth" style="width:758px;height:400px&quo ...

  6. electron中JS报错：require is not defined的问题解决方法

    Electron已经发布了6.0正式版,升级后发现原来能运行的代码报错提示require is not defined 解决办法: 修改创建BrowserWindow部分的相关代码,设置属性webPr ...

  7. （译）通过 HTML、JS 和 Electron 创建你的第一个桌面应用

    原文:Creating Your First Desktop App With HTML, JS and Electron 作者:Danny Markov 近年来 web 应用变得越来越强大,但是桌面 ...

  8. 记一次使用Node.js electron打包网站的记录

    具体步骤请参考:http://blog.csdn.net/a727911438/article/details/70834467 打包时出现了不少问题,逐一记录下来以供其他人参考. package.j ...

  9. 如何用Electron Js创建第一个应用Hello World

    什么是Electron Node.js和Chromium的结合品.允许只使用HTML,CSS和JavaScript来开发跨平台桌面应用. 编写第一个Electron程序(Hello World) 在开 ...

随机推荐

  1. spring MVC学习笔记

    为开发团队选择一款优秀的MVC框架是件难事儿,在众多可行的方案中决择需要很高的经验和水平.你的一个决定会影响团队未来的几年.要考虑方面太多: 1.简单易用,以提高开发效率.使小部分的精力在框架上,大部 ...

  2. Go语言interface详解

    interface Go语言里面设计最精妙的应该算interface,它让面向对象,内容组织实现非常的方便,当你看完这一章,你就会被interface的巧妙设计所折服. 什么是interface 简单 ...

  3. Beta版本冲刺———第五天

    会议照片: 项目燃尽图: 1.项目进展: 困难:基本计划中增加的功能已经完成,但是在"如何保存每次游戏的分数,并将其排序列在排行榜中"遇到麻烦,现在小组都在一起协商攻克中.

  4. 1103简单SQL 行转列思路

    转自http://www.cnblogs.com/lhj588/p/3315876.html -- 经典行列转化DROP TABLE IF EXISTS TabName;CREATE TABLE Ta ...

  5. 单例模式（Singleton Pattern）

    意图 保证一个类仅有一个实例,并提供一个该实例的全局访问点 可将一个实例扩展到n个实例.限定某类最多只能创建n个实例. 双重锁定实现单例模式 C# public sealed class Single ...

  6. hibernate-DetachedCriteria实现关联表条件复查

    表结果如下 CREATE TABLE `ent_lable` ( `idStr` ) NOT NULL, `pk_1` ) NOT NULL, `pk_2` ) NOT NULL, PRIMARY K ...

  7. 在MAC上搭建tomcat，再使用servlet时遇到的问题。

    说起来真是惭愧.在mac上配置tomcat环境时.tomcat6能正确运行.但是7,8都运行不了.具体表现是tomcat6访问127.0.0.1:8080可以显示那个界面,然而tomcat7和8都显示 ...

  8. python 模块的介绍（一）

    模块让你能够有逻辑地组织你的Python代码段. 把相关的代码分配到一个 模块里能让你的代码更好用,更易懂. 模块也是Python对象,具有随机的名字属性用来绑定或引用. 简单地说,模块就是一个保存了 ...

  9. BZOJ 2683: 简单题

    2683: 简单题 Time Limit: 50 Sec  Memory Limit: 128 MBSubmit: 913  Solved: 379[Submit][Status][Discuss] ...

  10. css-文本超出后显示省略号

    1.如果是单行文本: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 2.如果是多行文本,将文本框高度设为文字行高的倍数 ...