html页面生成图片并下载

梦里梦外; 2022-05-12 01:26 288阅读 0赞

<body>
        <div id="shareBody">
          <div id="code"></div>
          <p>一些文本..</p>
          <p>菜鸟教程，学的不仅是技术，更是梦想！！！</p>
        </div>
      </body>
    <script type="text/javascript" src="/hello/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="/hello/js/html2canvas.js"></script>
    <script src="/hello/js/qrcode.js"></script>
    <script>
      var qrcode = new QRCode('code', {
      text: 'your content',
      width: 100,
      height: 100,
      colorDark : '#000000',
      colorLight : '#ffffff',
      correctLevel : QRCode.CorrectLevel.H
    });
    </script>
    <script>
    	var w = $("#shareBody").width();
        var h = $("#shareBody").height();
    
        //要将 canvas 的宽高设置成容器宽高的 2 倍
        var canvas = document.createElement("canvas");
        canvas.width = w * 2;
        canvas.height = h * 2;
        canvas.style.width = w + "px";
        canvas.style.height = h + "px";
        var context = canvas.getContext("2d");
        //然后将画布缩放，将图像放大两倍画到画布上
        context.scale(2, 2);
    
        html2canvas(document.querySelector("#shareBody"), {
          canvas: canvas,
          onrendered: function (canvas) {
            var url = canvas.toDataURL("image/png"); //base64数据
            alert(url);
            window.location.href=url.replace("image/png", "image/octet-stream");
          }
        });
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，288人围观）

还没有评论，来说两句吧...

相关阅读

相关使用vue实现HTML页面生成图片

这篇文章写得是实现HTML页面生成图片（附带二维码）并保存，之前做过这个需求，不过当时不太会使用VUE，采用的方法是后端来生成，前端也是使用了html2canvas辅助生成，比

朴灿烈づ我的快乐病毒、/ 2023年05月28日 12:58/ 0 赞/ 11 阅读

相关 html页面生成pdf

方法 > 主要用到html2canvas.js 和 pdf.debug.js 原理 > html2canvas.js ：通过canvas将HTML生成的DOM节点

男娘i/ 2022年12月15日 02:20/ 0 赞/ 257 阅读

相关 Js实现将html页面或div生成图片

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

迈不过友情╰/ 2022年12月05日 05:19/ 0 赞/ 206 阅读

相关 vue 页面生成图片功能

首先感谢作者：[巨人][Link 1] 1首先安装依赖包 cnpm install html2canvas --save sudo cnpm i qrca

墨蓝/ 2022年11月14日 13:17/ 0 赞/ 206 阅读

相关把HTML变成图片并下载到本地

同学问如何把生成的HTML网页变成图片并下载到本地，去网上搜了一下，大部分都是部分代码，没有详细的源码，现把源码贴出，供大家参考。本例子是用Hbulider写的静态页面，不

待我称王封你为后i/ 2022年06月14日 08:29/ 0 赞/ 307 阅读

相关 Js实现将html页面或div生成图片

Js实现将html页面或div生成图片今天要分享的是用html2canvas根据自己的需求生成截图，并且修复html2canvas截图模糊，以及绕过服务器图片保存

╰+攻爆jí腚メ/ 2022年05月28日 06:12/ 0 赞/ 241 阅读

相关 html页面生成图片并下载

<body> <div id="shareBody"> <div id="code"></div> <p>一些文

梦里梦外;/ 2022年05月12日 01:26/ 0 赞/ 289 阅读

相关用java代码根据html页面生成图片

为什么做这个？目前微信公众号开发很火，开发模式跟用户互动时可以是文字、图文、图片、语音、视频等。而公众号界面展示基本都是html5页面。

心已赠人/ 2022年04月05日 08:14/ 0 赞/ 1013 阅读

相关前端页面HTML表格生成EXCEL下载

前言主要使用jquery插件工具table2excel来实现将HTML页面上的table表格生成Excel下载到客户端。（兼容IE和chrome浏览器）由于功能比

本是古典何须时尚/ 2022年03月15日 11:44/ 0 赞/ 619 阅读

相关页面生成图片-html2canvas

页面生成图片-html2canvas 引入js 示例编写html，指定根标签id：table 生成图片base64

客官°小女子只卖身不卖艺/ 2021年10月06日 03:08/ 0 赞/ 463 阅读