将HTML内容生成图片

最新推荐文章于 2025-05-14 22:27:35 发布

长路漫漫兮，吾修远道

最新推荐文章于 2025-05-14 22:27:35 发布

阅读量1.5w

点赞数 3

文章标签： html2canvas

本文链接：https://blog.youkuaiyun.com/weixin_44550157/article/details/89950775

版权

本文介绍了html2canvas，它能在用户浏览器端直接对整个或部分页面进行截屏，将页面渲染成Canvas图片，无需服务器渲染，在客户端浏览器创建。还说明了不支持Canvas时的替代技术、支持的浏览器，以及其基本语法和参数含义。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

开发工具与关键技术：VS/MVC
作者：何桂朋
撰写时间：2019年5月7日

html2canvas 能够实现在用户浏览器端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个Canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。它不需要来自服务器任何渲染，整张图片都是在客户端浏览器创建。当浏览器不支持Canvas时，将采用Flashcanvas或ExplorerCanvas技术代替实现。以下浏览器能够很好的支持该脚本：Firefox 3.5+, Google Chrome, Opera新的版本, IE9以上的浏览器。html2canvas可以通过获取HTML的某个元素，然后生成Canvas，能让用户保存为图片。(这段来自前端开发博客)
基本语法

html2canvas(element,options)
Element 意思是“元素”，可以通过获取HTML的某个元素，然后生成Canvas，能让用户保存为图片
Options 意思是“选择项”。

例子：

var width = $(".txtBox").width();
$("#modelImage .modal-dialog").width(width);
     html2canvas($("#certificateBox"), {
     onrendered: function (canvas) {
     console.log(canvas);
     //生成base64图片数据
     var dataUrl = canvas.toDataURL();
     $("#modCertificateImg").attr("src", dataUrl);
}
});

在这里插入图片描述
allowTaint：是否允许交叉源图像—允许跨域
background：画布背景颜色(如果DOM中没有指定)。为透明画布设置undefined
height：以像素为单位定义画布的heigt。如果为空，则以窗口的全高呈现
letterRendering：是否将每个字母单独呈现。如果使用字母间距，则是必要的。
Logging：在console.log ()中输出信息
Proxy：指向代理的Url，该代理将用于加载跨源图像。如果留空，则不会加载交叉原点图像
taintTest：是否在渲染前测试图片
timeout：加载图像的超时，以毫秒为单位。将其设置为0将不会导致超时。
Width：以像素为单位定义画布的宽度。如果为空，则以窗口的全宽度呈现。
示例：

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>成绩打印</title>
    <link href="~/Content/css/achievementPrint.css" rel="stylesheet" />
    <style>
        @@media (min-width: 576px) {
            .modal-dialog {
                max-width: 620px;
                margin: 1.75rem auto;
            }
        }
    </style>
</head>
<body>
  <div class="container mx-auto"> 
     <div id="certificateBox" class="mb-4">
       <img src="~/Content/images/Credential.png"  class="w-100 h-100"/>
       <div class="txtBox w-100">
          <div class="h4 text-center">重庆邮电大学学生安全知识网络测试</div>
          <div class="h4 text-center">合格证书</div>
          <p style="margin-bottom:0!important">姓 名：
<label id="StudentName"></label></p>
          <p style="margin-bottom:0!important">
          <span>于</span><label id="StTime">___年__月__日</label>
         参加重庆邮电大学学生安全知识网络测试，得分:<label id="Achievement">
分,成绩合格。</label></p>
          <p><span>特发此证！</span></p>
          <p style="margin-bottom:0!important">
          证书编号：
          <label id="CertificateNumber"></label>
          <label class="float-right" style="font-size:1.3rem;">重庆邮电大学</label>
         </p>
          <p class="text-right mt-2"><label id="IssuanceTime"></label></p>
          </div>
      </div>
 </div>
<script>
	$(function () {
function CreateImage() {
            var width = $(".txtBox ").width();
            $("#modelImage .modal-content").width(width);
            // var StudentName = $("#StudentNumber").text.trim();
            html2canvas($("#certificateBox"), {
                onrendered: function (canvas) {
                    var dataUrl = canvas.toDataURL();
                    console.log(dataUrl);
                    $("#modelImage img").attr("src", dataUrl);
                }
            });
            $("#modelImage").modal("show");
        }})
</script>

效果图：
在这里插入图片描述