.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 ...
随机推荐
- Unicode编码的魅力：跨语言交流的桥梁
引言: Unicode编码是一种用于表示世界上所有字符的标准编码方式.它解决了字符集兼容性和多语言文本处理的难题,成为实现全球化软件的关键技术.本文将深入探讨Unicode编码的优点与缺点,并介绍它在 ...
- Series基础
目录 创建Series对象 1) 创建一个空Series对象 2) ndarray创建Series对象 3) dict创建Series对象 4) 标量创建Series对象 访问Series数据 1) ...
- JS Leetcode 263. 丑数 题解分析，来认识有趣的丑数吧
壹 ❀ 引 本题来自LeetCode263. 丑数,难度简单,题目描述如下: 给你一个整数 n ,请你判断 n 是否为 丑数 .如果是,返回 true :否则,返回 false . 丑数 就是只包含质 ...
- 优雅地使用pt-archiver进行数据归档（转）
一.引言 最近由于业务需求,需要将公有云RDS(业务库)的大表数据归档至私有云MySQL(历史库),以缩减公有云RDS的体积和成本. 那么问题来了,数据归档的方式有n种,选择哪种呢?经过一番折腾,发现 ...
- BUU PWN RIP1 RET2CODE WRITEUP
1.下载附件后,运行是一个输入程序,IDA分析main函数,gets可溢出. F5伪代码如下: int __cdecl main(int argc, const char **argv, const ...
- Kafka集群搭建与SpringBoot项目集成
本篇文章的目的是帮助Kafka初学者快速搭建一个Kafka集群,以及怎么在SpringBoot项目中使用Kafka. kafka集群环境包地址:https://pan.baidu.com/s/1Mar ...
- 实操开源版全栈测试工具RunnerGo安装（二）Linux安装
手动安装(支持Linux.MacOS.Windows) Linux安装步骤 以debian系统为例,其他linux系统参考官方文档:https://docs.docker.com/engine/ins ...
- SpringCloud使用Kafka消费者
目录 POM文件配置 创建kafka配置 系统配置信息 启动入口 POM文件配置 <project xmlns="http://maven.apache.org/POM/4.0.0&q ...
- 【Azure 应用服务】在安全漏洞扫描中发现有泄露服务器IIS版本的情况，如何实现屏蔽服务版本号信息呢？
问题描述 当对Azure App Service应用进行安全扫描时,发现了HTTP/S请求的响应头中会包含服务端IIS的版本信息,这是一个低风险因素. 如: Server: Microsoft-IIS ...
- 【Azure Redis 缓存】Azure Redis加入VNET后，在另一个区域（如中国东部二区）的VNET无法访问Redis服务(注：两个VNET已经结对，相互之间可以互ping)
问题描述 为了保护Redis资源,把它与VNET集成后,实现只能通过VNET内网访问.在东二的区域中部署两个Redis服务后,发现一个奇怪的现象:东1区中的VM资源通过全局对等互联(Peering)实 ...