<!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 + SpringMVC + MyBatis

    1.需求说明实现用户通过数据库验证登录需求,采用Myeclipse+Tomcat 6.0+Mysql 5.0+JDK 1.6 2.数据库表开发所用是Mysql数据库,只建立单张用户表T_USER,表结 ...

  2. iOS -- autoResizingMask使用(转)

    autoResizingMask 是UIView的一个属性,在一些简单的布局中,使用autoResizingMask,可以实现子控件相对于父控件的自动布局. autoResizingMask 是UIV ...

  3. directly receive json data from javascript in mvc

    if you send json data to mvc,how can you receive them and parse them more simply? you can do it like ...

  4. 理解CDN

    一.CDN定义 CDN的全称是Content Delivery Network,即内容分发网络.其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快.更稳定.通过 ...

  5. windows server2008 r2 下启用 sqlserver 2008的远程连接

    首先说明,本文转自互联网. TMD 花了二天,终于找到怎么开启这个远程连接了.....娘的,累死了,写下来,希望能帮助同胞们... 用win server 2008 r2 和sql server 20 ...

  6. MySQ中Lmax_connections的合理设置

    max_connections 是指整个mysql服务器的最大连接数max_used_connections 是指每个数据库用户的最大连接数 MySQL服务器的连接数并不是要达到最大的100%为好,还 ...

  7. CAEmitterLayer 粒子发射Layer的相关属性

    emitterCells:CAEmitterCell对象的数组,被用于把粒子投放到layer上 birthRate:可以通俗的理解为发射源的个数,默认1.0.当前每秒产生的真实粒子数为=CAEmitt ...

  8. 简单工厂VS工厂方法

    前言: GOF经典的23种设计模式在IT界现已被广为流传.由于比较长时间没有用了,个人对于不同模式与模式之间的区别也渐渐模糊,故开始重温设计模式的思想.也希望更给对设计模式感兴趣的朋友些许的启发. - ...

  9. [日常训练]常州集训day2

    T1 Description 给定$N$个点,问这$N$个点能构成的三角形个数. Input 第一行一个整数$N$,代表点数. 接下来$N$行,每行两个非负整数$X,Y$,表示一个点的坐标. Outp ...

  10. 【caffe】cifar10例子之quick_train.sh在windows下的解决方案

    @tags caffe 照例还是转写为python脚本: import os caffe_root=os.environ['caffe_root'] caffe_build=os.environ['c ...