canvas下的全屏问题

最新推荐文章于 2025-06-30 13:02:07 发布

转载最新推荐文章于 2025-06-30 13:02:07 发布 · 458 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000008179040

本文介绍了一种使用HTML5 Canvas实现图片全屏显示的方法。通过加载图片到Canvas中，并利用不同浏览器的全屏API实现全屏效果。示例代码展示了如何在多种浏览器环境下兼容地实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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