精华内容
下载资源
问答
  • HTML转图片

    千次阅读 2019-04-28 17:30:53
    HTML转图片 博主在最近的工作中遇到了这么一个问题:将 HTML 页面中渲染的内容保存为图片文件或 base64 字节流。于是博主便开始如下探索: 首先博主从同事那里打听到了一个 js 库 html2canvas.min.js ,该库可将...

    博主在最近的工作中遇到了这么一个问题:将 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:

    1. 上述样例需在 web 服务器中进行发布测试,否则会因跨域问题导致失败。
    2. 浏览器下载下来的图片文件是没有文件格式后缀的
    3. canvas2image Github地址:https://github.com/hongru/canvas2image
    4. html2canvas Github地址:https://github.com/niklasvh/html2canvas/
    5. html2canvas 官网:http://html2canvas.hertzen.com/
    6. 代码下载:https://download.csdn.net/download/supreme_sir/11149920
    展开全文
  • js实现HTML转换成图片

    万次阅读 2017-08-10 14:31:24
    html2image

    1.首先利用html2canvas把html转换成canvas

    html2canvas($('#content'),{
        onrendered: function(canvas) {
            document.body.appendChild(canvas);
        }
    })

    2.利用canvas对象方法:toDataURL()把canvas转换成图片

    function convertCanvasToImage(canvas) {
        var image = new Image();
        image.src = canvas.toDataURL("image/png");
        return image;
    }

    得到的数据格式为:data:image/png;base64…

    完整代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="jquery.min.js"></script>
        <script src="html2canvas.js"></script>
    </head>
    <body>
        <div id="content" style="width:150px;height:150px;border:1px solid blue;">
            <span>Hello World!</span>
            <br>
            <span><h2>Are you hear me?</h2></span>
        </div>
        <button id="btnSave">save</button>
    <script>
    $(function(){
        $('#btnSave').click(function(event) {
            html2canvas($('#content'),{
                onrendered: function(canvas) {
                    document.body.appendChild(canvas);
                    convertCanvasToImage(canvas);
                }
            })
    
        });
    
        function convertCanvasToImage(canvas) {
            var image = new Image();
            image.src = canvas.toDataURL("image/png");
            document.body.appendChild(image);
            return image;
        }
    
    })
    </script>
    </body>
    </html>
    展开全文
  • java Html2Image 实现html转图片功能

    千次阅读 2017-07-17 21:06:52
    java Html2Image 实现html转图片功能 //java Html2Image 实现html转图片功能  // html2image  HtmlImageGenerator imageGenerator = new HtmlImageGenerator();  String htmlstr = " src='...

    java Html2Image 实现html转图片功能

    //java Html2Image 实现html转图片功能 

    // html2image
      HtmlImageGenerator imageGenerator = new HtmlImageGenerator();

       String htmlstr = "<table width='654' cellpadding='0' cellspacing='0' bordercolor='#FFFFFF'><tr><td><img       src='http://www.apkfather.com/yhqserver/images/mdl.jpg'/></td><td><img src='http://www.apkfather.com/yhqserver/images/mdl.jpg'/></td><td><img src='http://www.apkfather.com/yhqserver/images/mdl.jpg'/></td></tr><tr><td><img src='http://www.apkfather.com/yhqserver/images/mdl.jpg'/></td><td><img src='http://www.apkfather.com/yhqserver/images/mdl.jpg'/></td><td><img src='http://www.apkfather.com/yhqserver/images/mdl.jpg'/></td></tr><tr><td><img src='http://www.apkfather.com/yhqserver/images/mdl.jpg'/></td><td><img src='http://www.apkfather.com/yhqserver/images/mdl.jpg'/></td><td><img src='http://www.apkfather.com/yhqserver/images/mdl.jpg'/></td></tr><tr><td><img src='http://www.apkfather.com/yhqserver/images/mdl.jpg'/></td></tr></table>";

      imageGenerator.loadHtml(htmlstr);

      imageGenerator.getBufferedImage();

      imageGenerator.saveAsImage("d:/hello-world.png");

      imageGenerator.saveAsHtmlWithMap("hello-world.html", "hello-world.png");

    // html2image  api介绍

    HtmlImageGenerator Methods

    • loadUrl(url) - Loads HTML from URL object or URL string. (从url载入html)
    • loadHtml(html) - Loads HTML source. (载入本地html)
    • saveAsImage(file) - Save loaded HTML as image. (以图片形式保存html)
    • saveAsHtmlWithMap(fileimageUrl) - Creates an HTML file containing client-side image-map <map>generated from HTML's links. (创建一个HTML文件包含客户端image-map)
    • getLinks() - List all links in the HTML document and their corresponding href, target, title, position and dimension. (列出所有在HTML文档的链接和相应href、目标、头衔、位置和尺寸)
    • getBufferedImage() - Get AWT buffered image of the HTML. (获得awt,html缓冲后的图片)
    • getLinksMapMarkup(mapName) - Get HTML snippet of the client-side image-map <map> generated from the links. (HTML代码段里获得的客户端image-map <地图>产生的链接)
    • get/setOrientation(orientation) - Get/Set document orientation (left-to-right or right-to-left). (get/set文本定位)
    • get/setSize(dimension) - Get/Set size of the generated image. (设置生成图片大小)

     





    import gui.ava.html.image.generator.HtmlImageGenerator;
    
    
    public class Html2ImageTest {
    
        public static void main(String[] args) {
            HtmlImageGenerator imageGenerator = new HtmlImageGenerator();
            String html= "<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>"
                    +" <html xmlns='http://www.w3.org/1999/xhtml'>"
                    +"<style>.p1 {font-size:36px;font-weight:200;color:#0000FF;}</style>"
                    +"<style>.p2 { font-size:24px;font-weight:300;color: #FF0000;}</style>"
                    +"<head><meta http-equiv='Content-Type' content='text/html; charset=utf-8' /><title>CSS外联样式表</title></head>"
                    +"<body><p class='p1'>CSS外联样式表</p><p class='p2'>CSS外联样式表</p><p class='p3'>CSS外联样式表</p><p class='p4'>CSS外联样式表 </p></body></html>";
            //imageGenerator.loadHtml(html);
            //imageGenerator.loadUrl("http://mtkplmap2:7001/esdm_web");
            imageGenerator.loadUrl("http://www.icbc.com.cn/ICBC/%E7%BD%91%E4%B8%8A%E5%9F%BA%E9%87%91/%E5%9F%BA%E9%87%91%E5%B9%B3%E5%8F%B0/%E5%9F%BA%E9%87%91%E4%BA%A7%E5%93%81%E5%88%97%E8%A1%A8.htm");
            imageGenerator.saveAsImage("d:/test/hello-world2.png");
            imageGenerator.saveAsImage("d:/test/hello-world2.jpg");
            // imageGenerator.saveAsHtml("d:/test/hello.html", html);
        }
    
    }

    展开全文
  • HTML内容转换成图片

    万次阅读 2019-04-26 17:30:48
    HTML转换成图片,这是在很多时候都会用到的,比如说证书的生成,打印,当把数据信息填写进证书里面的之后,就需要把这个html转换成图片,然后进行打印。当然了不仅仅只是只把证书生成图片那么简单,甚至只要你想,...

    把HTML转换成图片,这是在很多时候都会用到的,比如说证书的生成,打印,当把数据信息填写进证书里面的之后,就需要把这个html转换成图片,然后进行打印。当然了不仅仅只是只把证书生成图片那么简单,甚至只要你想,你还可以把整个HTML页面转换成一张图片都可以,那么接下来用一个简单的例子来演示如何把HTML生成一张图片

    首先这是定义好的html内容
    在这里插入图片描述

    这个html页面这是一张证书
    在这里插入图片描述

    那么接下来就把这个html页面生成一张图片, 那么在此次之前,先引入一个插件

    在这里插入图片描述
    在这里插入图片描述
    主要是用这个插件来进行转换生成,
    同时,在前面定义了生成图片的按钮,

    在这里插入图片描述

    定义这个按钮是为了当点击的时候就触发生成图片。同时,把生成好的图片放在了一个定义好的模体框里面,
    一开始这个模态框是隐藏起来的。同时,里面也放了个img标签,当此刻这个img标签是没有值的,。都定义好之后开始书写转换生成图片的代码。代码如下,
    在这里插入图片描述
    一开始是先获取按钮的点击事件,然后再获取要生成图片的部分,这里的#certificateBox就是前面证书页面的ID,然后生成图片的路径,再把路径添加到模态框里面的img标签里面,再把模态框显示出来就可以了。

    那现在到页面上演示下效果,

    在这里插入图片描述
    可以看到,当点击生成图片的时候,已经把证书生成了图片显示在了模态框里面。

    以上是一个把html生成一张图片的例子,可以看到,整个过程是非常简单的。·

    展开全文
  • -- 将Canvas画图转换成图片并下载 这个封装了 canvas的DataToURI方法,(ps:因为要浏览器强制下载,源代码其实是有一定的问题,在使用 Mime为 image/octet-stream 时,可以强制下载但是文件的后缀和名称都无法保存...
  • HTML转图片或者HTML转PDF

    千次阅读 2017-07-31 18:23:33
    我使用的是wkhtmltoimage,和wkhtmltopdf实现的html转换图片或者是PDF ,该程序是C语言写的,执行效果好,速度快并且稳定。 相关文档查看:https://wkhtmltopdf.org/ 相关命令查看:...
  • html2canvas 踩坑记录 - HTML转图片

    千次阅读 2019-07-26 11:03:12
    html2canvas “Screenshots with JavaScript”,把html转成canvas,也就可以转成图片。比如页面截图、生成活动海报等实用场景。在使用过程有一些坑 ,需要注意一下。 在线图片跨域 因为canvas中安全机制,加载图片...
  • js实现html转图片保存

    千次阅读 2019-03-13 15:43:11
    使用html2canvas.js插件转把html转成canvas 使用canvas2image.js插件转把canvas转image 调用canvas2image.js的方法保存图片 先贴代码,效果图在后边 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&...
  • java库Html2Image:实现html转图片功能

    千次阅读 2016-08-04 17:50:54
    [java] view plain copy package com.ky.util; import gui.ava.html.image.generator.HtmlImageGenerator; /** * */ public class Html2ImageTest { public static void main(String[] 
  • java实现Html转图片

    千次阅读 2020-01-03 13:43:04
    * @Description HTML转Image * @param htmText HTML文本字符串 * @return 希望生成的Image Location */ public static String html2Img(String title,String content, String saveImageLocation){ ...
  • HTML转图片利器:wkhtmltox

    万次阅读 2017-04-19 14:11:09
    关于wkhtmltox,是一个可以把HTML转换图片和pdf的工具。不多介绍了,详见官网 https://wkhtmltopdf.org/安装步骤 下载下来是tar.xz文件,首先解压: tar -vxf wkhtmltox-0.12.4_linux-generic-amd64.tar.xz
  • 有时我们需要将html直接转成图片,这就需要借助一些工具。一.javascript利用html2canvas.js转化 基本原理就是利用 html2canvas.js插件,将html页面画到canvas里,再利用canvas.toDataURL()得到生成图片的base64码。...
  • 实现html和word的相互转换(带图片

    万次阅读 多人点赞 2018-06-16 13:29:10
    目前从html转换的word为doc格式,而图片处理支持的是docx格式,所以需要手动把doc另存为docx,然后才可以进行图片替换。 一.添加maven依赖 主要使用了以下和poi相关的依赖,为了便于获取html图片元素,还使用了...
  • 业务场景 生成一个由背景图片、文字、icon、二维码组合的...生成了二维码后点击保存二维码时在canvas中绘制图形,然后调用canvasToTempFilePath方法把当前画布内容导出指定大小的图片,返回图片路径,然后调用sav...
  • html标签转换成img图片

    千次阅读 2018-02-11 16:49:06
    app 里的元素需要转换成图片 &lt;script src="../assets/js/html2canvas.min.js"&gt;&lt;/script&gt; $(function () { html2canvas(document.querySelector("#app"), {...
  • 如何将HTML转成图片?看这里你就会了!

    万次阅读 多人点赞 2019-05-11 10:11:51
    就这涉及到了富文本编辑器的知识和将HTML转成图片的技术。今天这个文章主要是讲如何将html转成图片,富文本编辑器的知识可以观看笔者的另外一篇博客富文本编辑器实现原理 如果想将html元素转变成图片那么就需要俩个...
  • qtjambi-4.5.2_01.jar qtjambi-win64-msvc2005x64-4.5.2_01.jar
  • html页面转换成图片

    千次阅读 2013-01-08 15:26:14
    问题分析:需要根据用户选择的不同游戏,不同年份来生成带有不同描述规则的一张图片,如果利用java去画这张图片,显然很不靠谱,利用一些开源的图形工具,都是在...然后再将这个html页面转换一张图片,这样做不就可以
  • html页面转换成图片

    千次阅读 2013-03-12 16:21:27
    在linux下可以接上下文路劲,也可配置环境变量。 ... Wkhtmltoimage 是一个可执行文件,解压出来即可运行,解压到某个路径下后,需要配置环境变量...安装成功之后,就可以用以上方式将html页面转换成图片啦。
  • HTML转换成一张图片

    万次阅读 2019-05-08 11:03:42
    在MVC项目的学习过程中,其中项目里面有一个页面需要将视图里面的HTMl生成图片。...通过以上的学习,了解到了如何将HTML转换成一张图片。下面是我做的一个案例,这个案例里面没有运用到项目里面的模态窗体,但实现的...
  • Html2Image转换html成图片的一些坑

    千次阅读 2019-10-05 09:37:27
    在将html转成图片这个领域,Html2Image这个工具使用率是不低的。但是这个工具有个明显的坑。  一、当你的html页面引入外部的CSS文件以及JS文件,生成的图片是无法带有这些动态效果的。也就是说,它不支持复杂的...
  • https://sourceforge.net/projects/djproject/files/DJ%20Native%20Swing/1.0.3%20preview/

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 472,364
精华内容 188,945
关键字:

html转图片