DOM元素转为图片

最新推荐文章于 2024-02-05 10:37:15 发布

rouduo_zjy

最新推荐文章于 2024-02-05 10:37:15 发布

阅读量452

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/rouduo_zjy/article/details/106118399

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

DOM元素转化图片

用到HTML2canvas：
http://html2canvas.hertzen.com/dist/html2canvas.min.js
IOS13.4版本在微信运行无效在手机浏览器中正常

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    *{margin: 0;padding: 0;}
    #myCanvas{
        width: 100%;
        height: auto;
    }
    </style>
</head>
<body>
    <div id="tu_wei" style="width: 100%;height: 300px;background-color:rgba(0, 0, 0, 0);">
        <p style="font-size:16px;color:rgb(22, 17, 17);">你好呀！</p>
    </div>
    <!-- <button>生成图片</button><br> -->
    <div class="cover" style="display:bolck;">
        <div class="CoverImg" style="width:100%;height:100%;position:fixed;left:0;top:0;background: rgba(0, 0, 0, 0.5)">
             <img src="" alt="" id="myCanvas">
        </div>
    </div>
            ·
</body>
<script src="./js/jquery.js"></script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<script>
    
    fofo()
    function fofo() {
        html2canvas(document.querySelector("#tu_wei"), {
             useCORS: true,
             logging: true,
             timeout: 500,
             allowTaint: false,
             }).then(canvas => {
            var imgUrl = canvas.toDataURL("image/jpeg",1);
            console.log(imgUrl);
            var img = document.querySelector("#myCanvas");
            img.src = imgUrl;
            
        });
    }
    
    //移动端长按屏幕方法
    $.fn.longPress = function(fn) { //长按监听
        var timeout = undefined;
        var $this = this;
        for (var i = 0; i < $this.length; i++) {
            $this[i].addEventListener('touchstart', function(event) {
                timeout = setTimeout(fn, 2000); //长按时间超过2000ms，则执行传入的方法
            }, false);
            $this[i].addEventListener('touchend', function(event) {
                clearTimeout(timeout); //长按时间少于2000ms，不会执行传入的方法
            }, false);
        }
    }
    $('body').longPress(function() {//长按执行
        fofo()
    });
</script>
</html>

rouduo_zjy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM元素转为图片

DOM元素转化图片用到HTML2canvas：http://html2canvas.hertzen.com/dist/html2canvas.min.jsIOS13.4版本在微信运行无效在手机浏览器中正常<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
复制链接

扫一扫