zoukankan      html  css  js  c++  java
  • electron photobooth.js

    <!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>
    
  • 相关阅读:
    关于在组件GIS开发中使用Python的一点补充说明
    shell环境变量以及set,env,export的区别
    快速配置 Samba 将 Linux 目录映射为 Windows 驱动器
    Expect 教程中文版
    rpm 包管理
    .bash_profile和.bashrc的什么区别
    grep 零宽断言
    自动化测试
    dialog shell下的gui设计 代替繁杂libncurses编程
    x11 gtk qt gnome kde 之间的区别和联系
  • 原文地址:https://www.cnblogs.com/mayidudu/p/6050137.html
Copyright © 2011-2022 走看看