<!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. mvc4 ajax.beginform表单验证

    @{ Layout = null; } @model MvcApplication1.Models.User @using (Ajax.BeginForm("create", &q ...

  2. [转]实体类（VO，DO，DTO）的划分

    原文地址:http://blog.sina.com.cn/s/blog_7a4cdec80100wkyh.html 经常会接触到VO,DO,DTO的概念,本文从领域建模中的实体划分和项目中的实际应用情 ...

  3. [转]Servlet 3.0 新特性详解

    原文地址:http://blog.csdn.net/xiazdong/article/details/7208316 Servlet 3.0 新特性概览 1.Servlet.Filter.Listen ...

  4. C++中的重载隐藏覆盖&&JAVA中的重载覆盖&&多态

    class 类继承默认是private, struct 默认继承是public C++中的隐藏: 只要派生类中出现和基类一样的函数名,基类中的函数就会被派生类中的函数给隐藏(如果派生类和基类中的函数名 ...

  5. Kernel Methods (4) Kernel SVM

    (本文假设你已经知道了hard margin SVM的基本知识.) 如果要为Kernel methods找一个最好搭档, 那肯定是SVM. SVM从90年代开始流行, 直至2012年被deep lea ...

  6. URL详解与URL编码

    作为前端,每日与 URL 打交道是必不可少的.但是也许每天只是单纯的用,对其只是一知半解,随着工作的展开,我发现在日常抓包调试,接口调用,浏览器兼容等许多方面,不深入去理解URL与URL编码则会踩到很 ...

  7. lightoj 1074 spfa判断负环

     Extended Traffic Time Limit:2000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu Sub ...

  8. linux下截取整个网页

    前提需要安装 gimp图片处理软件 打开gimp 文件-创建-从网页  然后输入网页地址就可以截取整个网页了

  9. shell替换一个或多个空格为逗号

    (1)把文本中的一个或者多个空格替换为逗号 文本内容如下: # cat text 1 2 4 2 2 3 4 3 3 4 4 4 4 2 4 (2)shell程序代码为: # cat text | s ...

  10. 【BZOJ-1046】上升序列 DP + 贪心

    1046: [HAOI2007]上升序列 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3723  Solved: 1271[Submit][Stat ...