<!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. extjs store的操作

    先来个声明,看着不错,贴过来的,没都测试过. Store.getCount()返回的是store中的所有数据记录,然后使用for循环遍历整个store,从而得到每条记录. 除了使用getCount() ...

  2. js和jQuery的日常

    让当前页面显示整个屏幕 - (iframe 从后台跳转到前台的时候容易多层嵌套)$(document).ready(function(){ if(window.top != window.self) ...

  3. [转]Null value was assigned to a property of primitive type setter of"原因及解决方法

    原文地址:http://blog.csdn.net/kevinzhangfei/article/details/6995316 在action请求数据的过程中报出"Null value wa ...

  4. 【CodeVS 1037】取数游戏

    http://codevs.cn/problem/1037/ Alice必胜是Alice将硬币移向边权为0的一端并且把经过的边变为0,让BoB无路可走. 这样只要起点到两个方向最近的0边权的端点的边数 ...

  5. zabbix的配置使用

    1 zabbix忘记密码的解决办法 zabbix的默认密码我们都知道是admin,zabbix都是存在与数据库中的 select * from zabbix.user where alias='adm ...

  6. matplotlib 基础

    plt.figure(2) #创建图表2 plt.figure(1) #创建图表1 ax1=plt.subplot(211) # 在上面 最近的 图表1上 创建子图1 ax2=plt.subplot( ...

  7. Android studio：Groovy 与 Gradle 基础【三】

    转载:http://www.apkbus.com/forum.php?mod=viewthread&tid=255064&extra=page%3D2%26filter%3Dautho ...

  8. bzoj 2005

    裸的2D gcd.ans=(Σ(d<=n)phi[d]*(n/d)*(m/d))*2-n*m; #include<iostream> #include<cstdio> # ...

  9. 【BZOJ-4668】冷战 并查集 + 按秩合并 + 乱搞

    4668: 冷战 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 37  Solved: 24[Submit][Status][Discuss] Des ...

  10. 【BZOJ-3275&3158】Number&千钧一发 最小割

    3275: Number Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 748  Solved: 316[Submit][Status][Discus ...