这段时间在管理后台,有用到图片全屏的,我是用canvas的引入的图片,哎!也是给自己挖了一个大坑,没办法,只能踩坑走啦,所以当时想着能不能直接用canvas直接进行图片全屏查看,不过网上百度出来的也是五花八门,结合百度自己整理了一个小的demo
HTML
<canvas id="blog" width="548" height="364"></canvas>
<br/>
<input value="点击全屏" onclick="fullScreen();" type="button">
JS
window.onload = function(){
//引入图片在canvas中
var blog =document.getElementById('blog');
var context = blog.getContext('2d');
var img = new Image();
img.onload = function(){
draw(this);
};
img.src = 'img/2.jpg';
function draw(obj){
context.drawImage(obj,0,0);
}
};
//进行全屏并适配各浏览器
function fullScreen() {
var element = document.getElementById('blog'),method = "RequestFullScreen";
var prefixMethod;
["webkit", "moz", "ms", "o", ""].forEach(function(prefix) {
if (prefixMethod)
return;
if (prefix === "") {
// 无前缀,方法首字母小写
method = method.slice(0,1).toLowerCase() + method.slice(1);
}
var fsMethod = typeof element[prefix + method];
if (fsMethod + "" !== "undefined") {
// 如果是函数,则执行该函数
if (fsMethod === "function") {
prefixMethod = element[prefix + method]();
} else {
prefixMethod = element[prefix + method];
}
}
}
);
return prefixMethod;
};
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。