.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 ...
随机推荐
- CentOS7.5上卸载Oracle19c
最近遇到一个麻烦的事情,由于公司开发的数据库备份容灾系统,对于备份容灾的数据库必须使用LVM(pv.vg.lv),所以之前安装的Oracle19C 必须卸载掉,然后使用空白磁盘通过parted.fdi ...
- Spring Boot整合JWT实现接口访问认证
最近项目组需要对外开发相关API接口,需要对外系统进行授权认证.实现流程是先给第三方系统分配appId和appSecret,第三方系统调用我getToken接口获取token,然后将token填入Au ...
- 《系列二》-- 5、单例bean缓存的获取
目录 1 判断bean是否完成整个加载流程 2 判断当前bean是否被加载过,是否已作为提前暴露的bean 关于循环依赖 阅读之前要注意的东西:本文就是主打流水账式的源码阅读,主导的是一个参考,主要内 ...
- Hi3516开发笔记（九）：在QtCreator开发环境中引入海思sdk的bsp包，运行显示Qt界面
前言 之前启动Qt界面程序失败了,是因为需要引入HiSDK的BSP中的HiMPP,并对HiMPP进行初始化设置. 在sdk中查询海思SDK头文件和库 在Qt中调用海思BSP 在 ...
- Java JVM——7.本地方法栈
本地方法栈 Java虚拟机栈于管理Java方法的调用,而本地方法栈用于管理本地方法的调用. 本地方法栈,也是线程私有的. 允许被实现成固定或者是可动态扩展的内存大小.(在内存溢出方面是相同的) ✎ 如 ...
- java.lang.IllegalStateException: Failed to check the status of the service 的解决办法
参考资料 java.lang.IllegalStateException: Failed to check the status of the service 的解决办法_Hello_World_QW ...
- 用Docker发布网站时，自动下载Directory.Build.props及其Import的文件
为Blazor网站项目,"添加Docker支持" 这时,网站项目根目录下会新增Dockerfile. 里面文字内容如下 #See https://aka.ms/customizec ...
- 【Azure 应用服务】Azure Powershell Function 出错 The term 'Connect-AzAccount' is not recognized
问题描述 在Azure Function中,执行Powershell的Function脚本时,先后出现 1:[Error] ERROR: The term 'Connect-AzAccount' is ...
- 003-Java程序流程控制
3. Java程序流程控制(重点) 程序的三种控制结构 3.1 分支结构 if, switch 3.1.1 if if 分支 根据条件(真或假)来决定执行某段代码. if分支应用场景 if 第一种形式 ...
- Java 设计模式----单例模式--懒汉式
1 package com.bytezreo.singleton; 2 3 /** 4 * 5 * @Description 单例模式 ---懒汉式 6 * @author Bytezero·zhen ...