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>
    
  • 相关阅读:
    HTML基础 meta refresh 网页定时刷新
    HTML基础 meta name author 添加网页作者的信息
    HTML基础 mate refresh 5秒钟后,页面自动跳转
    HTML基础 marquee div块实现循环跑马灯的效果
    微服务jar包启动脚本
    怎么实现将word中的公式导入(或粘贴)到在线编辑中
    怎么实现将word中的公式导入(或粘贴)到网页编辑中
    Nginx实现浏览器端大文件分块上传
    javascript实现浏览器端大文件分块上传
    js实现浏览器端大文件分块上传
  • 原文地址:https://www.cnblogs.com/mayidudu/p/6050137.html
Copyright © 2011-2022 走看看