菜单

将图纸的二进制字节 在HTML页面中显得

2019年1月27日 - Bootstrap

HTML5中与页面显示相关的API

2015/05/15 · HTML5 ·
HTML5

初稿出处:
涂根华的博客   

在HTML5中,伸张了2个与页面呈现相关的API,分别是Page Visibility
API与Fullscreen API; 功用分别如下:

Page Visibility API 
是指当页面变为最小化状态或者用户将浏览器标签切换来此外标签时会触发。

Fullscreen API 是将页面全部或页面中某个局地区域设为全屏。

Page Visibility API的使用场地如下:

  1. 一个应用程序中拥有多幅图片的幻灯片式的连接播放效果,当页面变为不可知状态(最小化状态或者将用户浏览器标签切换来任何标签时),图片为止播放,当页面变为可知状态时,图片继续播放。
  2. 在一个实时展现服务器端音讯的应用程序中,当页面处于不可知状态(最小化状态或者将用户浏览器标签切换来其余标签时),停止定期向劳动器端请求数据的处理,当页面变为可见状态,继续执行定期向劳动器端请求数据的拍卖。
  3. 在一个所有播放视频效果的应用程序中,当页面处于不可知状态(最小化状态或者将用户浏览器标签切换到其余标签时),暂停播放录像,当页面变为可知状态时,继续播放视频。

浏览器支持程度:Firefox10+,chrome14+,IE10+;

实现Page Visibility API

在行使Page Visibility
API时,我们率先须求判定当前用户所运用的浏览器以及该浏览器是否辅助。代码如下判断:

JavaScript

if(typeof document.hidden !== ‘undefined’) { hidden = ‘hidden’;
visibilityChange = ‘visibilitychange’; }else if(typeof
document.mozHidden !== ‘undefined’) { hidden = ‘mozHidden’;
visibilityChange = ‘mozvisibilitychange’; }else if(typeof
document.msHidden !== ‘undefined’) { hidden = ‘msHidden’;
visibilityChange = ‘msvisibilitychange’; }else if(typeof
document.webkitHidden !== ‘undefined’) { hidden = ‘webkitHidden’;
visibilityChange = ‘webkitvisibilitychange’; }

1
2
3
4
5
6
7
8
9
10
11
12
13
if(typeof document.hidden !== ‘undefined’) {
    hidden = ‘hidden’;
    visibilityChange = ‘visibilitychange’;
}else if(typeof document.mozHidden !== ‘undefined’) {
    hidden = ‘mozHidden’;
    visibilityChange = ‘mozvisibilitychange’;
}else if(typeof document.msHidden !== ‘undefined’) {
    hidden = ‘msHidden’;
    visibilityChange = ‘msvisibilitychange’;
}else if(typeof document.webkitHidden !== ‘undefined’) {        
    hidden = ‘webkitHidden’;
    visibilityChange = ‘webkitvisibilitychange’;
}

如上,在Page Visibility
 API中,可以由此document对象的hidden属性值来判断页面是不是处于可知状态,当页面处于可知状态时属性值为false,当页面处于不可知状态时属性值为true。

在Page
Visibility中,可以透过document对象的visibilityState属性值来判定页面的可知状态。该属性值为一个字符串,其意思如下所示:

   
visible:
 页面内容部分可知,当前页面位于用户正在查阅的浏览器标签窗口中,且浏览器窗口未被最小化。

   
hidden:
 页面内容对用户不可见。当前页面不在用户正在查阅的浏览器标签窗口中,或浏览器窗口已被最小化。

    prerender: 页面内容已被预渲染,可是对用户不可知。

近年来大家来看一个demo,页面中有一个video元素与一个”播放”按钮,用户单击”播放”按钮时
按钮文字变为
’暂停”,同时启幕播放video元素的视频,当页面变为最小化状态或用户浏览器标签切换来其余标签时候,视频被暂停播放,当页面复苏正常状态或用户将浏览器标签切回页面所在标签时,摄像持续播放。

HTML代码如下:

JavaScript

<video id=”videoElement” controls width=640 height=360 autoplay>
<source src=”Wildlife/Wildlife.ogv” type=’video/ogg; codecs=”theora,
vorbis”‘/> <source src=”Wildlife/Wildlife.webm” type=’video/webm’
> <source src=”Wildlife/Wildlife.mp4″ type=’video/mp4′>
</video> <button id=”btnPlay”
onclick=”PlayOrPause()”>播放</button> <div
style=”height:1500px;”></div>

1
2
3
4
5
6
7
<video id="videoElement" controls width=640 height=360 autoplay>
    <source src="Wildlife/Wildlife.ogv" type=’video/ogg; codecs="theora, vorbis"’/>
    <source src="Wildlife/Wildlife.webm" type=’video/webm’ >
    <source src="Wildlife/Wildlife.mp4" type=’video/mp4′>
</video>
<button id="btnPlay" onclick="PlayOrPause()">播放</button>
<div style="height:1500px;"></div>

JS代码如下:

JavaScript

var hidden, visibilityChange, videoElement; if(typeof document.hidden
!== ‘undefined’) { hidden = ‘hidden’; visibilityChange =
‘visibilitychange’; }else if(typeof document.mozHidden !== ‘undefined’)
{ hidden = ‘mozHidden’; visibilityChange = ‘mozvisibilitychange’; }else
if(typeof document.msHidden !== ‘undefined’) { hidden = ‘msHidden’;
visibilityChange = ‘msvisibilitychange’; }else if(typeof
document.webkitHidden !== ‘undefined’) { hidden = ‘webkitHidden’;
visibilityChange = ‘webkitvisibilitychange’; }
document.add伊夫ntListener(visibilityChange,handle,false); videoElement =
document.getElementById(“videoElement”);
videoElement.add伊夫ntListener(‘ended’,videoEnded,false);
videoElement.add伊夫(Eve)ntListener(‘play’,videoPlay,false);
videoElement.add伊夫(Eve)ntListener(‘pause’,videoPause,false); //
倘若页面变为不可知状态 则暂停录像播放 //
若是页面变为可知状态,则屡次三番视频播放 function handle() { //
通过visibilityState属性值判断页面的可知状态
console.log(document.visibilityState); if(document[hidden]) {
videoElement.pause(); }else { videoElement.play(); } } // 播放视频function play() { videoElement.play(); } // 暂停播放 function pause() {
videoElement.pause(); } function PlayOrPause() { if(videoElement.paused)
{ videoElement.play(); }else { videoElement.pause(); } } function
videoEnded(e) { videoElement.current提姆(Tim)e = 0; this.pause(); } function
videoPlay(e) { var btnPlay = document.getElementById(“btnPlay”);
btnPlay.innerHTML = “暂停”; } function videoPause(e) { var btnPlay =
document.getElementById(“btnPlay”); btnPlay.innerHTML = “播放”; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
var hidden,
visibilityChange,
videoElement;
if(typeof document.hidden !== ‘undefined’) {
    hidden = ‘hidden’;
    visibilityChange = ‘visibilitychange’;
}else if(typeof document.mozHidden !== ‘undefined’) {
    hidden = ‘mozHidden’;
    visibilityChange = ‘mozvisibilitychange’;
}else if(typeof document.msHidden !== ‘undefined’) {
    hidden = ‘msHidden’;
    visibilityChange = ‘msvisibilitychange’;
}else if(typeof document.webkitHidden !== ‘undefined’) {
    hidden = ‘webkitHidden’;
    visibilityChange = ‘webkitvisibilitychange’;
}
document.addEventListener(visibilityChange,handle,false);
videoElement = document.getElementById("videoElement");
videoElement.addEventListener(‘ended’,videoEnded,false);
videoElement.addEventListener(‘play’,videoPlay,false);
videoElement.addEventListener(‘pause’,videoPause,false);
// 如果页面变为不可见状态 则暂停视频播放
// 如果页面变为可见状态,则继续视频播放
function handle() {
    // 通过visibilityState属性值判断页面的可见状态
    console.log(document.visibilityState);
    if(document[hidden]) {
        videoElement.pause();    
    }else {
        videoElement.play();
    }
}
// 播放视频
function play() {
    videoElement.play();
}
// 暂停播放
function pause() {
    videoElement.pause();
}
function PlayOrPause() {
    if(videoElement.paused) {
        videoElement.play();
    }else {
        videoElement.pause();
    }
}
function videoEnded(e) {
    videoElement.currentTime = 0;
    this.pause();
}
function videoPlay(e) {
    var btnPlay = document.getElementById("btnPlay");
    btnPlay.innerHTML = "暂停";
}
function videoPause(e) {
    var btnPlay = document.getElementById("btnPlay");
    btnPlay.innerHTML = "播放";
}

实现Fullscreen API

在HTML5中,新增了一个Fullscreen
API,其功效是将页面全部或页面中某个局地区域设为全屏突显状态。

浏览器协助程度:Firefox10+,chrome16+,Safari5.1+

在Fullscreen
API中,可以因此DOM对象的根节点目的或某个元素的requestFullscreen属性值和履行相呼应的措施来判定浏览器是不是帮忙Fullscreen
API。代码如下:

JavaScript

var docElm = document.documentElement; if(docElm.requestFullscreen) {
docElm.requestFullscreen(); }else if(docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen(); }else if(docElm.webkitRequestFullScreen)
{ docElm.webkitRequestFullScreen(); }

1
2
3
4
5
6
7
8
var docElm = document.documentElement;
if(docElm.requestFullscreen) {
        docElm.requestFullscreen();
}else if(docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
}else if(docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
}

在Fullscreen
API中,也可以透过DOM对象或某个元素的exitFullscreen与CanvelFullScreen属性和办法将眼前页面或某个元素设定为非全屏展现状态。

一般来说代码:

JavaScript

if(document.exitFullscreen) { document.exitFullscreen(); }else
if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); }else
if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen();
}

1
2
3
4
5
6
7
if(document.exitFullscreen) {
    document.exitFullscreen();
}else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
}else if(document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
}

在Fullscreen
API中,可以透过监听DOM对象或某个元素的fullscreenchange事件(当页面或因素从非全屏突显状态成为全屏呈现状态,或从全屏突显状态变成非全屏呈现状态时触发)。代码如下:

JavaScript

document.addEventListener(‘fullscreenchange’,function(){},false);
document.addEventListener(‘mozfullscreenchange’,function(){},false);
document.addEventListener(‘webkitfullscreenchange’,function(){},false);

1
2
3
document.addEventListener(‘fullscreenchange’,function(){},false);
document.addEventListener(‘mozfullscreenchange’,function(){},false);
document.addEventListener(‘webkitfullscreenchange’,function(){},false);

在css样式代码中,大家得以应用伪类选取器来单独指定处于全屏呈现状态的页面或因素样式:

JavaScript

html:-moz-full-screen { background:red; } html:-webkit-full-screen {
background:red; } html:fullscreen { background:red; }

1
2
3
4
5
6
7
8
9
html:-moz-full-screen {
    background:red;
}
html:-webkit-full-screen {
    background:red;
}
html:fullscreen {
    background:red;
}

末尾咱们来看一个demo,在页面中有一个按钮,点击后,页面会变成全屏状态,再点击后,页面会退出全屏;

HTML代码如下:

JavaScript

<input type=”button” id=”btnFullScreen” value=”页面全屏呈现”
onclick=”toggleFullScreen();”/> <div style=”width:100%;”
id=”fullscreentState”>非全屏呈现</div>

1
2
<input type="button" id="btnFullScreen" value="页面全屏显示" onclick="toggleFullScreen();"/>
<div style="width:100%;" id="fullscreentState">非全屏显示</div>

Javascript如下:

JavaScript

var docElm = document.documentElement; var fullscreentState =
document.getElementById(“fullscreentState”); var btnFullScreen =
document.getElementById(“btnFullScreen”); fullscreentState.style.height
= docElm.clientHeight + ‘px’;
document.add伊芙(Eve)ntListener(‘fullscreenchange’,function(){
fullscreentState.innerHTML = (document.fullscreen) ? “全屏呈现” :
“非全屏展现”; },false);
document.add伊夫(Eve)ntListener(‘mozfullscreenchange’,function(){
fullscreentState.innerHTML = (document.mozFullscreen) ? “全屏突显” :
“非全屏展现”; },false);
document.add伊芙(Eve)ntListener(‘webkitfullscreenchange’,function(){
fullscreentState.innerHTML = (document.webkitFullscreen) ? “全屏展现” :
“非全屏呈现”; },false); function toggleFullScreen() {
if(btnFullScreen.value == ‘页面全屏展现’) { btnFullScreen.value =
‘页面非全屏显示’; if(docElm.requestFullscreen) {
docElm.requestFullscreen(); }else if(docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen(); }else if(docElm.webkitRequestFullScreen)
{ docElm.webkitRequestFullScreen(); } }else {
if(document.exitFullscreen) { document.exitFullscreen(); }else
if(document.mozCancelFullScreen) { document.mozCancelFullScreen(); }else
if(document.webkitCancelFullScreen) { document.webkitCancelFullScreen();
} btnFullScreen.value = “页面全屏显示”; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
var docElm = document.documentElement;
var fullscreentState = document.getElementById("fullscreentState");
var btnFullScreen = document.getElementById("btnFullScreen");
fullscreentState.style.height = docElm.clientHeight + ‘px’;
document.addEventListener(‘fullscreenchange’,function(){
    fullscreentState.innerHTML = (document.fullscreen) ? "全屏显示" : "非全屏显示";
},false);
document.addEventListener(‘mozfullscreenchange’,function(){
    fullscreentState.innerHTML = (document.mozFullscreen) ? "全屏显示" : "非全屏显示";
},false);
document.addEventListener(‘webkitfullscreenchange’,function(){
    fullscreentState.innerHTML = (document.webkitFullscreen) ? "全屏显示" : "非全屏显示";
},false);
function toggleFullScreen() {
    if(btnFullScreen.value == ‘页面全屏显示’) {
        btnFullScreen.value = ‘页面非全屏显示’;
        if(docElm.requestFullscreen) {
            docElm.requestFullscreen();
        }else if(docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        }else if(docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        }
    }else {
        if(document.exitFullscreen) {
            document.exitFullscreen();
        }else if(document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }else if(document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
        btnFullScreen.value = "页面全屏显示";
    }
}

赞 收藏
评论

图片 1

二种办法:

后端的一般处理程序:Imge.ashx

图片 2图片 3

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 using System.Web.UI.WebControls;
 6 
 7 namespace Test
 8 {
 9     /// <summary>
10     /// Imge 的摘要说明
11     /// </summary>
12     public class Imge : IHttpHandler
13     {
14 
15         public void ProcessRequest(HttpContext context)
16         {
17 
18             #region 方法一
19             System.IO.MemoryStream ms = new System.IO.MemoryStream();
20             System.IO.Stream str = new FileUpload().PostedFile.InputStream;
21             System.Drawing.Bitmap map = new System.Drawing.Bitmap(str);
22             map.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
23             context.Response.ClearContent();
24             context.Response.ContentType = "image/Jpeg";
25             context.Response.BinaryWrite(ms.ToArray());  //将二进制字节输出到页面 
26             #endregion
27 
28             #region 方法二
29             System.IO.FileStream fs = new System.IO.FileStream("Filename", System.IO.FileMode.Open, System.IO.FileAccess.Read);
30             byte[] datas = new byte[fs.Length];
31             fs.Read(datas, 0, Convert.ToInt32(fs.Length));
32             fs.Close();
33             context.Response.OutputStream.Write(datas, 0, Convert.ToInt32(fs.Length));
34             context.Response.End();
35             #endregion
36         }
37 
38         public bool IsReusable
39         {
40             get
41             {
42                 return false;
43             }
44         }
45     }
46 }

View Code

HTML页面代码:

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4     <title></title>
5 </head>
6 <body>
7 <img src="/Imge.ashx" />  <!---图片的src指向Imge.ashx 就可以--->
8 </body>
9 </html>

 

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图