HTML转图片

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

Supreme_Sir

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

阅读量2.3k

点赞数

分类专栏：前端文章标签： HTML转canvas canvas转图片 HTML转图片 canvas2image html2canvas

禁止商用，转载请注明出处。如有不妥之处，望大佬斧正。联系方式：supreme_tt@163.com

本文链接：https://blog.csdn.net/Supreme_Sir/article/details/89642422

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

博主在最近的工作中遇到了这么一个问题：将 HTML 页面中渲染的内容保存为图片文件或 base64 字节流。于是博主便开始如下探索：

首先博主从同事那里打听到了一个 js 库 html2canvas.min.js ，该库可将 HTML 转 Canvas 同时可用以获取 canvas 内容的字节流。
上述 js 库的发现，使获取字节流的需求得到了解决，但是将内容保存为图片的需求还没解决。于是博主又在浏览器上进行了一顿猛如虎的查询，找了另外一个 js 库 canvas2image.js，这个库的发现，成功解决了博主另一个需求。

博主与需求的故事到此结束，下面就是激动人心的时刻：上代码！！！

demo.html

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="UTF-8">
    <script type="text/javascript" src="html2canvas.min.js"></script>
    <script type="text/javascript" src="canvas2image.js"></script>
    <style type="text/css">

    /*将图片在窗体可见区外进行渲染*/
    .canvasDemo {
        width: 1920px;
        height: 1080px;
        background: url("S1.jpg");
        background-size: 1920px 1080px;
        position: absolute;
        top: -30000px;
        left: -30000px;
    }

    .marker {
        width: 30px;
        height: 30px;
        background-color: blue;
        position: absolute;
        top: 50px;
        left: 50px;
    }
    #cvs{
        position: absolute;
        top: -30000px;
        left: -30000px;
    }
    </style>
</head>

<body style="overflow: hidden;">
    <!-- HTML 容器 -->
    <div class="canvasDemo" id="screenImg">
        <!-- 在容器中做个小标记，以示改插件可用于带图片背景和HTML标签样式的HTML到canvas的转换 -->
        <div class="marker"></div>
    </div>
    
    <!-- 定义一个canvas容器 -->
    <canvas width="1920" height="1080" id="cvs"></canvas>

    <script type="text/javascript">

    // 将 canvas 转为 base64 字节码
    html2canvas(document.getElementById("screenImg")).then(function(canvas) {
        // 将渲染出来的图片显示在页面中
        document.body.appendChild(canvas);
        // 打印 canvas 内容的 base64 字节流
        console.log(canvas.toDataURL());
    });

    // 将转换完成的 HTML 渲染至指定 canvas 标签中并将其保存 canvas 为图片
    var canvasDom = document.getElementById('cvs');
    html2canvas(document.getElementById("screenImg"),{canvas:canvasDom}).then(function(canvas) {
        Canvas2Image.saveAsImage(canvasDom, "1920", "1080", "png");
    });
    </script>
</body>

</html>

效果图

示例代码粘贴完事，收工！下~ ~ ~ 班 ~ ~ ~ 是不可能下班的！工作使我快乐，我也要996，也要ICU

PS：

上述样例需在 web 服务器中进行发布测试，否则会因跨域问题导致失败。
浏览器下载下来的图片文件是没有文件格式后缀的
canvas2image Github地址：https://github.com/hongru/canvas2image
html2canvas Github地址：https://github.com/niklasvh/html2canvas/
html2canvas 官网：http://html2canvas.hertzen.com/
代码下载：https://download.csdn.net/download/supreme_sir/11149920

Supreme_Sir

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML转图片

HTML转图片博主在最近的工作中遇到了这么一个问题：将 HTML 页面中渲染的内容保存为图片文件或 base64 字节流。于是博主便开始如下探索：首先博主从同事那里打听到了一个 js 库 html2canvas.min.js ，该库可将 HTML 转 Canvas 同时可用以获取 canvas 内容的字节流。上述 js 库的发现，使获取字节流的需求得到了解决，但是将内容保存为图片的需求还没...
复制链接

扫一扫