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 条评论
登录 后参与评论

相关文章

来自专栏较真的前端

Vue相关的前端面试题,每道题都很经典~

6.6K30
来自专栏小巫技术博客

A017-布局之FrameLayout

帧布局,是所有布局容器中最简单的一种,控件定义在FrameLayout中默认放置在左上角,定义在后面的控件会层叠在前面定义的控件之上,所以才会被称为帧布局。

12230
来自专栏深度学习之tensorflow实战篇

HTML5与HTML4的区别,新增的元素有哪些?

注:部分格式编写存在<>封闭错误,只为在博客中显示,并非正确写法。 1. HTML5推出的理由 解决Web上存在的问题: Web浏览器间的兼容性低:在...

42860
来自专栏python学习路

一、HTML

html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,...

1.7K40
来自专栏西安-晁州

关于vue.js中slot的理解

slot这块看官网文档,起初有点不懂,仔细研究还是最终理解了,slot是用来干嘛的呢,先看下一个例子:

15520
来自专栏西安-晁州

关于vue.js中slot的理解

15930
来自专栏西安-晁州

关于vue.js中slot的理解

slot这块看官网文档,起初有点不懂,仔细研究还是最终理解了,slot是用来干嘛的呢,先看下一个例子:

1.1K20
来自专栏Google Dart

AngularDart Material Design 扩展面板 顶

一个或多个面板在扩展面板集中组合在一起。 单击面板时,面板内容将展开。 面板由名称,值,可选的辅助文本和展开的面板内容组成。

10220
来自专栏AndroidTv

前端入门2-HTML标签声明正文-HTML标签

作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

20920
来自专栏抠抠空间

html基础

HTML简介 超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。 本质上是浏览器可识别的规则,我们按...

434110

扫码关注云+社区

领取腾讯云代金券