<!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. MySQL 5.7.9版本sql_mode=only_full_group_by问题

    用到GROUP BY 语句查询时com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Expression #2 of SELECT l ...

  2. Linq的TakeWhile误用

    where(func<>)返回符合条件的元素 与此相对的skipwhile跳过符合条件的,返回剩下的元素 容易误用的takewhile,与where 不一样,只有当所有元素满足条件时,才返 ...

  3. jqMobile中pageinit,pagecreate,pageshow等函数的执行顺序

    常见的共有5个page函数,刚开始有点迷糊的是到底谁先谁后执行. 实验告诉我们结果: var temp = ''; $('body').live('pagechange', function () { ...

  4. iOS开发小技巧--计算label的Size的方法总结

    计算label的Size方法 sizeWithAttributes:方法 适用于不换行的情况,宽度不受限制的情况 /// 根据指定文本和字体计算尺寸 - (CGSize)sizeWithText:(N ...

  5. 【CodeVS 1993】草地排水 isap模板题

    开始网络流的学习,更新一下isap的模板 #include<cstdio> #include<cstring> #include<algorithm> #defin ...

  6. git初体验（四）git标签

    1.git 标题(tag) 关于git标签的描述,参考这里 2.标题管理 创建: 切换到需要打标签的分支上,如: git checkout master git tag v1.0 # 默认标签是打在最 ...

  7. 【收藏】Java多线程/并发编程大合集

    (一).[Java并发编程]并发编程大合集-兰亭风雨    [Java并发编程]实现多线程的两种方法    [Java并发编程]线程的中断    [Java并发编程]正确挂起.恢复.终止线程    [ ...

  8. Windows 8.1 安装Ruby on Rails手记

    最近喜欢上了狂拽酷炫的Ruby 看了诸多文章都是Linux或Mac OS X环境配置,文章末尾还不忘把windows黑成一坨... 表示很无语.. 作为新世纪隐秘而强大的 .Net程序员 怎能脱离宇宙 ...

  9. iOS二维码扫描IOS7系统实现

    扫描相关类 二维码扫描需要获取摄像头并读取照片信息,因此我们需要导入系统的AVFoundation框架,创建视频会话.我们需要用到一下几个类: AVCaptureSession 会话对象.此类作为硬件 ...

  10. pycharm使用错误排查

    1.pip安装扩展包报错 creating build/temp.linux-x86_64-3.4 x86_64-linux-gnu- -Wformat -Werror=format-security ...