微信H5页面用Html2canvas生成图片的几种方式

最新推荐文章于 2024-06-22 16:47:25 发布

Super乐

最新推荐文章于 2024-06-22 16:47:25 发布

阅读量6.6k

点赞数 2

分类专栏：微信文章标签： H5 Html2canvas.js 页面生成图片微信H5开发

本文链接：https://blog.csdn.net/wplblog/article/details/86529332

版权

微信专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Demo：仅供参考，实际业务场景请根据自己的需求修改（本案例提供的是思路和实现方式）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <link rel="stylesheet" type="text/css" href="/js/test_css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="/js/test_css/index.css"/>
    //上面两个是页面的样式，可以不用借用，用自己的即可。
    <script src="/js/jquery-1.10.1.min.js?>"></script>
    <script src="/js/html2canvas.js?>"></script>
    <style>
        * {
            margin: 0;
        }
        canvas {
            margin-right: 5px;
        }
    </style>
</head>
<body>
<div class="tablexqys">
    <table>
        <tbody>
        <tr>
            <th>开团时间</th>
            <th>开团人</th>
            <th>开团人数</th>
            <th>开团详情</th>
        </tr>
        <tr>
            <td class="ckan">2018.09.02 14:34</td>
            <td class="ckan">6/6</td>
            <td class="ckan">3人团</td>
            <td class="ckan">查看</td>
        </tr>
        <tr>
            <td colspan="4" style="height: 200px">
                <img id="short" style="position:absolute; z-index:1; height: 15%;width: 30%"  src="/web_style/web_img/v325/weichat-logo.png" />
            </td>
        </tr>
        </tbody>
    </table>
</div>
<!--页面最终生成的图片-->
<!--<div id="predict_img">
    <div id="box" hidden style="position:absolute; z-index:1; height: 100px;width: 100px;padding:0px"></div>
</div>-->
<div style="width: 100%;height: 100%;">
    <img src="" alt="" id="predict_img" style="width:100%;height:100%;">
</div>
<script>
    //首先将内容生成一张图片
    $(document).ready(function () {
        createImg();
        setTimeout(function(){
            var predict_img = $("#predict_img").attr('src');
            if(predict_img.length<=0){
                location.href='/dev/standard/test_img';
            }
        },3000);
    });
    function createImg() {
        //直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊
        /*html2canvas(document.querySelector('div')).then(function(canvas) {
           document.body.appendChild(canvas);
        });*/
        //创建一个新的canvas
        var canvas2 = document.createElement("canvas");
        //选择生成内容的容器
        let _canvas = document.querySelector('.tablexqys');
        //获取宽高
        var w = parseInt(window.getComputedStyle(_canvas).width);
        var h = parseInt(window.getComputedStyle(_canvas).height);
        //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
        canvas2.width = w * 2;
        canvas2.height = h * 2;
        canvas2.style.width = w + "px";
        canvas2.style.height = h + "px";
        //可以按照自己的需求，对context的参数修改,translate指的是偏移量
        //  var context = canvas.getContext("2d");
        //  context.translate(0,0);
        var context = canvas2.getContext("2d");
        context.scale(2, 2);

        //触发截图方式一
        /*html2canvas(document.querySelector('.tablexqys'), { canvas: canvas2 }).then(function(canvas) {
            //将生成的页面追加到body后面
            document.body.appendChild(canvas);
            //生成以后，隐藏内容容器
            document.querySelector('.tablexqys').style.display = 'none';
        });*/

        //触发截图方式二
        /*html2canvas(document.querySelector('.tablexqys'), { canvas: canvas2 }).then(function(canvas) {
            //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
            document.querySelector(".down").setAttribute('href', canvas.toDataURL());
            //生成以后，隐藏内容容器
            document.querySelector('.tablexqys').style.display = 'none';
        });*/

        //触发截图方式三
        html2canvas(document.querySelector('.tablexqys'), { canvas: canvas2 }).then(function(canvas) {
            //赋值的方式
            getBase64Image(canvas.toDataURL());
            //生成以后，隐藏内容容器
            document.querySelector('.tablexqys').style.display = 'none';
        });

        //触发截图方式四
        /*html2canvas(document.querySelector('.tablexqys')).then(function(canvas) {
            var dataUrl = canvas.toDataURL();
            var newImg = document.createElement("img");
            newImg.src = dataUrl;
            newImg.height =  $(window).height();
            newImg.width = $(window).width();
            newImg.height = 300;
            newImg.width = 300;
            $("#box").show();
            $("#box").html(newImg);
            //生成以后，隐藏内容容器
            document.querySelector('.tablexqys').style.display = 'none';
        });*/
    }
    //转换成图片
    function getBase64Image(imgurl) {
        var img = new Image();
        img.src = imgurl;
        img.setAttribute('crossOrigin', 'anonymous');
        img.οnlοad=function(){
            var canvas = document.createElement("canvas");
            canvas.width = 300;//这个设置不能丢，否者会成为canvas默认的300*150的大小
            canvas.height = 300;//这个设置不能丢，否者会成为canvas默认的300*150的大小
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, 300, 300);
            var dataURL = canvas.toDataURL("image/png");
            $("#predict_img").attr("src",dataURL);
        }
    }
</script>
</body>
</html>

Super乐

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
微信H5页面用Html2canvas生成图片的几种方式

Demo：仅供参考，实际业务场景请根据自己的需求修改（本案例提供的是思路和实现方式）&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Demo&lt;/title&gt; &lt;link rel="styleshee
复制链接

扫一扫

专栏目录