js实现html页面转图片、并保存到本地

js实现html页面转图片,并保存图片在本地,实现原理为(html转canvas、canvas转image)

需要的库:canvas2image.js 下载地址:https://github.com/SuperAL/canvas2image;
需要的库:html2canvas.js 下载地址:http://html2canvas.hertzen.com/dist/html2canvas.min.js
效果如下:
js实现html页面转图片、并保存到本地_第1张图片

首先是html页面:

<head>
    <meta charset="utf-8">
     <meta name="viewport" content="width=320,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>实现HTML转图片title>
    <style type="text/css" media="screen">
        .bg{
                width: 100%;
                min-height: 100%;
                height: 100vh;
                background-color: #a799ac;
                text-align: center;
        }
        .text{
            width: 50%;
            margin-top: 20%;
            height: 25px;
            border: 1px solid #b7c092;
            border-radius: 10px;
            outline: none;
        }
        .save, .picture{
            border-radius: 10px;
            border: none;
            width: 60px;
            padding: 0;
            height: 25px;
            background: #9cd8b1;
            outline: none;
        }
        .title{
            /* margin-top: 100px; */
        }
        .need{
                /* background: url(20.jpg) no-repeat; */
                background-size: 400px;
                 background: linear-gradient(#3793b6, #c993d3);
        }
img{
    margin-top: 50px;
    width: 100%;
    height: 200px;
}
    style>

head>
<body style="padding: 0;margin: 0;">
<div class="bg">
    <input type="input" name="姓名" class="text" placeholder="输入姓名">
    <button type="button" class="save">确认button>
    <button type="button" class="picture">生成图片button>
   <div class="need" style="height: 200px;width: 400px">
    <p class="title" style="color: white">hellop>
    <p class="area" style="color: white">欢迎,这里是你需要截取到的区域p>
div>
div>

body>

有了页面我们就开始html到图片的转换逻辑;

首先在页面中引入我们需要用的js文件

<script src="https://code.jquery.com/jquery-3.1.1.min.js">script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.min.js" type="text/javascript" charset="utf-8" async defer>script>
<script src="canvas2image.js" type="text/javascript" charset="utf-8" async defer>script>
// 我已经将canvas2image.js放到工程目录,所以这里直接引用即可
然后编写我们的逻辑代码,因为代码中我已经给出了详细注释,所以就不累述了

代码如下:

    var text=$(".text").val();
    var info=$(".title");
    var save = $(".save");
    let w = $(window).width(); //图片宽度
    let h = $(window).height(); //图片高度
    console.log(w+"    "+h);
    save.click(function(e){
        // 获取输入框内容
        var text=$(".text").val();
        // 控制台输出,一般用于测试时开效果,实际项目不需要
        console.log(text);
        // 非空判断 
        if(!text)return;
        else // 不为空则加载到页面
        info.text(text);
    });
    var need = $(".need").get(0); //将jQuery对象转换为dom对象
    function getOS() { // 获取当前操作系统
    var os;
    if (navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Linux') > -1) {
        os = 'Android';
    } else if (navigator.userAgent.indexOf('iPhone') > -1||navigator.userAgent.indexOf('iPad') > -1) {
        os = 'iOS';
    } else if (navigator.userAgent.indexOf('Windows Phone') > -1) {
        os = 'WP';
    } else {
        os = 'Others';
    }
    return os;
}
console.log("操作系统"+getOS());

    // 点击转成canvas,最后用于生成图片
    $('.picture').click(function(e) {

        // 调用html2canvas插件
        html2canvas(need).then(function(canvas) {
            // canvas宽度
            var canvasWidth = canvas.width;
            // canvas高度
            var canvasHeight = canvas.height;
            // 控制台查看绘制区域的宽高
            console.log(canvasWidth+"    "+canvasHeight);

            // 渲染canvas,这个时候将我们用于生成图片的区域隐藏
             $(".need").hide();
                // 下面注释内容为测试内容,测试时可以去掉注释,方便查看生成的canvas区域
                // $(".need").after(canvas);

                // 调用Canvas2Image插件
                let w = $(window).width(); //图片宽度
                // let h = $(window).height(); //图片高度
                // 这里因为我们生成图片区域高度为400,所以这里我们直接指定
                let h = 400;

                // 将canvas转为图片
                var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
                // 渲染图片,并且加到页面中查看效果
                $(".need").after(img);

                    // 保存
                    let type = "png"; //图片类型
                    let f = "DNF"; //图片文件名,自定义名称
                    // w = (w === '') ? canvasWidth : w; //判断输入宽高是否为空,为空时保持原来的值
                    // h = (h === '') ? canvasHeight : h;

                    // 这里的判断用于区分移动端和pc端
                    if(getOS()=="Others")
                    {
                    // 调用Canvas2Image插件
                    Canvas2Image.saveAsImage(canvas, w, h, type, f);
                    }
        });
    });

注意一:

代码最后之所以要区分移动端与pc端,是因为在测试过程中发现,在pc端时,花括号内的代码执行有效,可以弹出提示让你保存图片到本地,当在移动端时,此方法会出现bug,因为图片采用的是base64格式,浏览器无法解析,就会导致页面跳转,无法保存图片,所以上面程序中加上区分后,不在移动端弹出保存到本地,因为移动端本身可以对长按图片保存有很好的支持,所以这部分代码就不需要了;经测试在iOS和Android上都是有效的,只要长按生成的图片就可以报讯到本地;

注意二:

细心的同学会发现我在开始的样式文件中注释掉了一个图片:

        .need{
                /* background: url(20.jpg) no-repeat; */
                background-size: 400px;
                 background: linear-gradient(#3793b6, #c993d3);
        }

因为在我们的业务中,我们可能是有背景图的,然后加上一些业务信息一起生成一张图片,当我们加上了背景图片后,代码在本地运行时会报错,原因是当我们保存图片时,会产生canvas2image报的跨域错误,这个问题也很好解决,只要我们将项目放在线上测试就不会有问题了,不要在本地测试就行,比如发布到GitHub上进行托管,然后在线上查看效果就不会有问题了,我是将图片放在了根目录下上传到GitHub的,不知道如果是图片外链形式会不会有问题,欢迎同学们尝试,留言你的建议核问题;

你可能感兴趣的:(js)