.Net实现Html保存到照片
本文将使用PuppeteerSharp组件、实现Html代码片段生成Jpg照片
PuppeteerSharp项目地址：https://github.com/hardkoded/puppeteer-sharp
1.安装引用PuppeteerSharp
1.1 使用Nuget界面管理器
搜索 "PuppeteerSharp"，找到对应的包点安装即可。
2.实现一段Html页面
<body>
<div class="box">
<h1>考场号: 01</h1>
<h1>座位号: 01</h1>
<div class="center-box">
<h4>姓 名: 花卷</h4>
<h4>身份证号: 545645456456465</h4>
<h4>准考证号: 54564545454</h4>
</div>
<div class="botom-box">
<h2>温馨提示:</h1>
<h3>请核对信息无误后,张贴在准考证指定位置！</h3>
</div>
</div>
</body>
</html>
<style>
.box{
box-sizing: border-box;
padding-top: 10px;
text-align: center;
font-family: fangsong;
}
.box>h1 {
font-size: 46px;
}
.center-box {
text-align: left;
width:290px;
margin:60px auto;
}
.center-box > h4{
font-size: 18px;
}
.botom-box {
text-align: left;
margin-left: 20px;
}
</style>
Html预览效果
`
考场号: 01
座位号: 01
姓 名: 花卷
身份证号: 545645456456465
准考证号: 54564545454
温馨提示:
请核对信息无误后,张贴在准考证指定位置！
.box { box-sizing: border-box; padding-top: 10px; text-align: center; font-family: fangsong }
.box>h1 { font-size: 46px }
.center-box { text-align: left; width: 290px; margin: 60px auto }
.center-box>h4 { font-size: 18px }
.botom-box { text-align: left; margin-left: 20px }`
C#实现代码
await new BrowserFetcher().DownloadAsync(BrowserFetcher.DefaultChromiumRevision);
var browser = await Puppeteer.LaunchAsync(new LaunchOptions
{
Headless = true
});
string destFilePath = AppDomain.CurrentDomain.BaseDirectory + "TestImgCreate\\";
if (!Directory.Exists(destFilePath))
{
Directory.CreateDirectory(destFilePath);
}
string outputFile = destFilePath + DateTime.Now.ToString("yyyyMMddHHmmss") + ".jpg";
using (var page = await browser.NewPageAsync())
{
await page.SetViewportAsync(new ViewPortOptions
{
Width = 425,//图片宽度
Height = 635//图片高度
});
await page.SetContentAsync(@"
<body>
<div class=\""box\"">
<h1>考场号: 01</h1>
<h1>座位号: 01</h1>
<div class=\""center-box\"">
<h4>姓 名: 花卷</h4>
<h4>身份证号: 545645456456465</h4>
<h4>准考证号: 54564545454</h4>
</div>
<div class=\""botom-box\"">
<h2>温馨提示:</h1>
<h3>请核对信息无误后,张贴在准考证指定位置！</h3>
</div>
</div>
</body>
</html>
<style>
.box{
box-sizing: border-box;
padding-top: 10px;
text-align: center;
font-family: fangsong;
}
.box>h1 {
font-size: 46px;
}
.center-box {
text-align: left;
width:290px;
margin:60px auto;
}
.center-box > h4{
font-size: 18px;
}
.botom-box {
text-align: left;
margin-left: 20px;
}
</style>");
ScreenshotOptions screenshotOptions = new ScreenshotOptions();
screenshotOptions.FullPage = true; //是否截取整个页面
screenshotOptions.OmitBackground = false;//是否使用透明背景，而不是默认白色背景
screenshotOptions.Quality = 100; //截图质量 0-100（png不可用）
screenshotOptions.Type = ScreenshotType.Jpeg; //截图格式
await page.ScreenshotAsync(outputFile, screenshotOptions);
}
生成之后发现样式没有进行渲染，效果如下
发现html中的样式丢失了,后将Html中的双引号替换成单引号后，样式可以正常展示，效果如下
如果需要生成PDF文件，只需要进行以下修改
await page.ScreenshotAsync(outputFile, screenshotOptions);
->
await page.PdfAsync(outputFile);
文件名称修改成PDF后缀
.Net实现Html保存到照片的更多相关文章
- iOS9中将图片保存到照片中的某个相册的方法说明
iOS9中将图片保存到照片中的某个相册的方法说明 在App中很经常遇到的就是用户点击某张图片后将图片保存到本地,下面介绍下iOS中保存图片的一些东西 1.首先,在iOS中把图片保存到系统照片是比较简单 ...
- 与众不同 windows phone (42) - 8.0 相机和照片: 通过 PhotoCaptureDevice 捕获照片
[源码下载] 与众不同 windows phone (42) - 8.0 相机和照片: 通过 PhotoCaptureDevice 捕获照片 作者:webabcd 介绍与众不同 windows pho ...
- UIImagePicker照片选择器
UIImagePickerController 1.+(BOOL)isSourceTypeAvailable:(UIImagePickerControllerSourceType)sourceType ...
- Android模仿iOS iMessages10照片选择器的实现
不知不觉已经接近半年多没有写过博客了,这段时间,也是我刚好毕业走出校园的时间,由于学习工作的原因,一直没有真正静下心来写下些什么东西.这个星期刚入了小米笔记本pro的坑,本着新电脑新生活的理念嘻嘻-- ...
- 华为云照片的爬虫程序更新(python3.6)
一.背景: 每年终都有一个习惯,就是整理资料进行归档,结果发现手机照片全备份在华为云里,在官网上找了一圈,没找到官方的pc工具用来同步照片. 于是找出上次写的程序,看看能不能爬到数据,然而……果然不好 ...
- python2.7下同步华为云照片的爬虫程序实现
1.背景 随着华为手机的销量加大,华为云的捆绑服务使用量也越来越广泛,华为云支持自动同步照片.通讯录.记事本等,用着确实也挺方便的,云服务带来方便的同时,也带来了数据管理风险.华为目前只提供一个www ...
- python版opencv：如何用笔记本摄像头拍照保存
因为需要制作制作数据集 所以需要在笔记本上外置了一个logi的摄像头 准备使用python上得opencv来进行拍照 环境:opencv+pycharm+win10+py3 #coding:utf-8 ...
- Android系统编程入门系列之应用数据文件化保存
应用中关于数据的持久化保存,不管是简单的SharedPreferences还是数据库SQLiteDatabase,本质上都是将数据保存到系统的某种类型的文件中.因此可以直接使用java.io.File ...
- 整理UIImagePickerController问题
[assetsLibrary addAssetsGroupAlbumWithName:@"iOSDevTip1" resultBlock:^(ALAssetsGroup *grou ...
- 利用Photos 框架搭建美图秀秀相册选择器
简介:Photos框架是iOS8.0后推出的一个新的用于对系统相册进行相关操作的,在iOS8.0之前,开发中只能使用AssetsLibrary框架来访问移动设备的图片库.本文中不再对AssetsLib ...
随机推荐
- MySQL 中 针对表和列的注释，方便使用其生成的实体类。mybatis-generator
- MySQL8.0-CTE递归查询（避免死循环）
TSQL脚本能实现递归查询,用户使用共用表表达式 CTE(Common Table Expression),只需要编写少量的代码,就能实现递归查询. 本文详细介绍CTE递归调用的特性和使用示例,递归查 ...
- Hive分区和分桶的区别
1．前言 Hive的分区和分桶都是细化数据管理,加快数据查询和分析,两者有什么区别呢?下面讲解一下分区和分桶的原理. 2．分区 (1)分区原理 Hive的分区表可以有一个或多个分区键,用于确定数据的存 ...
- CF327C Magic Five 题解
题目传送门 前置知识 等比数列求和公式 | 乘法逆元 解法 设 \(lena\) 表示 \(a\) 的长度. 首先,若一个数能被 \(5\) 整除,则该数的末尾一定为 \(0\) 或 \(5\).故考 ...
- NC200324 魔改森林
题目链接 题目 题目描述 曾经有一道叫做迷雾森林的题目,然而牛牛认为地图中的障碍太多,实在是太难了,所以删去了很多点,出了这道题. 牛牛给出了一个n行m列的网格图 初始牛牛处在最左下角的格点上(n+1 ...
- win32-使用EnumWindows比较两个窗口的Z轴
通过使用EnumWindows()和枚举窗口来手动确定EnumChildWindows()来直接确定哪个窗口在z轴上比另一个窗口高. struct myEnumInfo { HWND hwnd1; H ...
- pikachu SQL-inject insert/update注入
insert 注入 (修改信息处是update注入,和此处同理) 注册页面,用户处输入 1' 发现报错信息 You have an error in your SQL syntax; check th ...
- 【Azure 应用服务】在创建App Service时，遇见“No available instances to satisfy this request. App Service is attempting to increase capacity.”错误
问题描述 在创建新的App Service,遇见了资源不满足当前需求的提示.详细消息为: "Code": "Conflict","Message&qu ...
- 「实操」结合图数据库、图算法、机器学习、GNN 实现一个推荐系统
本文是一个基于 NebulaGraph 上图算法.图数据库.机器学习.GNN 的推荐系统方法综述,大部分介绍的方法提供了 Playground 供大家学习. 基本概念 推荐系统诞生的初衷是解决互联网时 ...
- Mutillidae品台上使用sqlmap注入测试
Mutillidae是一个开放源码的提供安全渗透测试的Web应用程序, Mutillidae可以安装在Linux.windows xp.windows 7等平台上.下载及安装说明文档详见:mutill ...