.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 ...
随机推荐
- 【译】介绍 MSTest Runner – CLI、Visual Studio 等
原文 | Amaury Levé, Marco Rossignoli, Jakub Jareš 翻译 | 郑子铭 我们很高兴推出 MSTest runner,这是一个用于 MSTest 测试的新型轻量 ...
- ABC 305
题目列表 前三题过水,第四题分类讨论两个端点之间的距离和所在位置是清醒或睡眠 即可. E 题意:一张图上有一些结点有保安,每个保安有不同的警戒度 \(h_i\),定义 一个结点是安全的 为这个结点可以 ...
- CF1834
A 给出一个由 \(1,-1\) 组成的序列.一次操作可以让一个数变相反. 要多少次操作,才能让整个序列和非负且积等于 \(1\). 大 氵题. B 定义两个数 \(A,B\) 有一个价值:每一位上的 ...
- NC50428 数星星 Stars
题目链接 题目 题目描述 天空中有一些星星,这些星星都在不同的位置,每个星星有个坐标.如果一个星星的左下方(包含正左和正下)有k颗星星,就说这颗星星是k级的. 例如,上图中星星5是3级的(1,2,4在 ...
- OGP协议的使用
OGP协议是一套Metatags的规格,用来标注页面,告诉我们你的网页快照.帮助社交app高效并准确的获取网页中的核心链接.标题.主图.正文摘要等信息,使得该网页在社交分享中有更好的展现体验. 如果网 ...
- 【Unity3D】半球卷屏特效
1 原理 凸镜贴图 和 渐变凸镜贴图 中介绍了使用 OpenGL 实现凸镜贴图及其原理,通过顶点坐标映射到纹理坐标,并构造三角形网格,构建了真正的三维凸镜模型.本文通过 Shader 实现半球卷屏 ...
- 《.NET物联网从零开始系列》-开篇
近日搞硬件网关时,那些残存的数电.模电和通信原理的记忆时常在脑海中萦绕: 想起来多年前看张高兴的博客学会了.netcore+树莓派进行物联网开发. 使用dragonboard(龙板)搭载windows ...
- Java并发编程实例--4.控制线程打断
Java提供了InterruptedException异常,当我们检测到线程被打断时可以抛出并在run()方法中进行捕捉. 本例中,我们将开发一个程序以实现根据文件名称在指定文件夹(包括其子目录)中搜 ...
- Postman文件数据导入导出
https://zhuanlan.zhihu.com/p/535757471?utm_id=0
- go控制grpc的metadata
grpc让我们可以像本地调用一样实现远程调用,对于每一次的RPC调用中,都可能会有一些有用的数据,而这些数据就可以通过 metadata来传递.metadata是以key-value的形式存储数据的, ...