这段时间在管理后台,有用到图片全屏的,我是用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;
        };

滕伟
105 声望8 粉丝

人生没有四季,只有两季,努力就是旺季,不努力就是淡季!