专栏首页前端菜鸟变老鸟js实现截图并保存图片(html转canvas、canvas转image)

js实现截图并保存图片(html转canvas、canvas转image)

js实现截图并保存图片在本地(html转canvas、canvas转image)

一、html转canvas

需要的库html2canvas.jscanvas2image.js

话不多说,直接上代码!

html
<h2>原始HTML</h2>
<div style="background:red;width: 600px;" class="test">
    <div style="background:green;">
        <div style="background:blue;">
            <div style="background:yellow;">
                <div style="background:orange;">
                    33333333333333333333333333333333
                </div>
            </div>

        </div>

    </div>
</div>
<h2 class="toCanvas"> <a href="javascript:void(0);"> 转成canvas </a></h2>
<h2 class="toPic"><a href="javascript:void(0);"> 转成图片 </a></h2>
<h5>
    <label for="imgW">宽度:</label>
    <input type="number" value="" id="imgW" placeholder="默认是原图宽度" />
    <label for="imgH">高度:</label>
    <input type="number" value="" id="imgH" placeholder="默认是原图高度" />
    <label for="imgFileName">文件名:</label>
    <input type="text" placeholder="文件名" id="imgFileName" />
    <select id="sel">
                <option value="png">png</option>
                <option value="jpeg">jpeg</option>
                <option value="bmp">bmp</option>
            </select>
    <button id="save">保存</button>
</h5>
css
<style>
    * {
        margin: 0;
        padding: 0;
    }

    div {
        padding: 20px;
        border: 5px solid black;
    }

    h2 {
        background: #efefef;
        margin: 10px;
    }

    .toPic {
        display: none;
    }
</style>
js
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="html2canvas.min.js"></script>
<script type="text/javascript" src="canvas2image.js"></script>
<script type="text/javascript">
    var test = $(".test").get(0); //将jQuery对象转换为dom对象
    // 点击转成canvas
    $('.toCanvas').click(function(e) {
        // 调用html2canvas插件
        html2canvas(test).then(function(canvas) {
            // canvas宽度
            var canvasWidth = canvas.width;
            // canvas高度
            var canvasHeight = canvas.height;
            // 渲染canvas
            $('.toCanvas').after(canvas);
            // 显示‘转成图片’按钮
            $('.toPic').show(1000);
            // 点击转成图片
            $('.toPic').click(function(e) {
                // 调用Canvas2Image插件
                var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight);
                // 渲染图片
                $(".toPic").after(img);
                // 点击保存
                $('#save').click(function(e) {
                    let type = $('#sel').val(); //图片类型
                    let w = $('#imgW').val(); //图片宽度
                    let h = $('#imgH').val(); //图片高度
                    let f = $('#imgFileName').val(); //图片文件名
                    w = (w === '') ? canvasWidth : w; //判断输入宽高是否为空,为空时保持原来的值
                    h = (h === '') ? canvasHeight : h;
                    // 调用Canvas2Image插件
                    Canvas2Image.saveAsImage(canvas, w, h, type, f);
                });
            });


        });
    });
</script>

代码都有详细的注释,就不一一介绍了。 下面来看看效果:

首先原始HTML里面的内容是需要截图的:

点击转成canvas:

可以看见此时增加一个一个canvas标签:

点击转成图片:

可以看见此时增加一个一个img标签:

点击保存:

至此,js截图就做完了。

html2canvas.jscanvas2image.js的下载地址:

html2canvas.js:http://html2canvas.hertzen.com/dist/html2canvas.min.js

canvas2image.js:https://github.com/SuperAL/canvas2image

源代码下载

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 彻底搞懂拖拽——基于鼠标事件的拖拽以及基于HTML5 API的拖拽完整实现

      一个典型的拖拽操作是这样的:用户用鼠标选中一个可拖动的(draggable)元素,移动鼠标到一个可放置的(droppable)元素,然后释放鼠标。 在操作期...

    从入门到进错门
  • div拖拽实现延伸

    从入门到进错门
  • ES6(二):Promise

    ES6之前解决异步编程只能使用回调函数或事件,ES6中加入了 Promise,使得异步编程更加简洁直观和合理

    从入门到进错门
  • 常见的canvas优化——模糊问题、旋转效果

    查阅canvas的API就可以知道,想要获得精确地线条,必须对线条是如何描绘出来的有所理解。

    前端博客 : alili.tech
  • web前端开发初学者十问集锦(1)

    答:script标签可以放置在html文件的任何地方(any where),比如既可以放置在html标签外,也可以放置在head内,也可以放置在body内,也可...

    Dabelv
  • vuejs基础-常见指令

    在VM实例中,如果想要获取data上的数据,或者想要掉哦用methods中的方法,必须通过this.数据属性名或者this.方法名来进行访问,这里的this,就...

    eadela
  • 使用 Sublime-snippet 来快速做前端页面

    在 Sublime 中,可以通过 Sublime-snippet 来快速补全代码。 举个栗子,如果在 Sublime 的存放 Submlime-snippet...

    Joel
  • Leetcode【526、667、932】

    这道题是一道构造题,即构造一个长度为 N 的自然序列,满足整除关系: i % nums[i] = 0 或 nums[i] % i = 0(i 为第 i 个位置)...

    echobingo
  • 科学家运用大数据准确识别昆虫

    大数据文摘
  • 如何使用腾讯云45元代金券购买带宽按量计费的云主机?

    对于收到腾讯云45元代金券,想要尝试一下云主机使用体验用户。可以阅读本教程,了解如何使用腾讯云45元代金券,购买带宽按量计费的云主机。

    贺嘉

扫码关注云+社区

领取腾讯云代金券