目前正在开发在我的贷款计算器应用程序上导出 PDF 的功能。我有一个预览屏幕，可以在您保存 PDF 之前显示它。预览屏幕由带有 html 的 webView 组成，其中包含占位符。我能够成功地将图像插入到正确的占位符上，并将其显示在 PDF 上。但在 iOS 13 中，图像不再显示或显示太小。
折线图.html
<div class ="line-graph">
<center class = "graph-header">Amortization Line Chart</center>
<img class = "image" src="data:image/png;base64,#ImageData#" alt="Line Graph">
</div>
将图像转换为 Base-64 编码字符串并将其放入 #ImageData# 的代码
let isLineGraphSelected = lineGraphDictionary[.isSelectedString] as! Bool
self.lineGraphSnapshot = lineGraphDictionary[.snapshotString] as? UIImage
if isLineGraphSelected && self.lineGraphSnapshot != nil{
let data = self.lineGraphSnapshot.pngData()
if let imageITData = data?.base64EncodedString() {
LineGraphHTMLContent = LineGraphHTMLContent.replacingOccurrences(of: "#ImageData#", with: imageITData)
}
} else {
LineGraphHTMLContent = ""
}
如果您需要更多背景信息，请告诉我。
截图：
iOS 12.1
iOS 13.0
这是我的其他 HTML 文件的完整上下文
PDFSheet.HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.loan-box {
max-width: 800px;
margin: auto;
padding: 30px;
border: 1px solid #d9d9d9;
font-size: 16px;
line-height: 24px;
font-family: 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
color: #555;
}
.graph-header {
margin: auto;
font-size: 45px;
line-height: 45px;
padding: 30px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
color: #333;
}
.line-graph {
max-width: 800px;
margin: auto;
padding: 30px;
}
.loan-box table {
width: 100%;
line-height: inherit;
text-align: left;
}
.loan-box table td {
padding: 5px;
vertical-align: top;
}
.loan-box table tr td:nth-child(2) {
text-align: right;
}
.loan-box table tr.top table td {
padding-bottom: 20px;
width: 100%;
display: block;
text-align: center;
}
.loan-box table tr.top table td.title {
font-size: 45px;
line-height: 45px;
color: #333;
}
.loan-box table tr.top table td.date {
font-size: 24px;
}
.loan-box table tr.heading td {
background: #eee;
border-bottom: 1px solid #ddd;
font-weight: bold;
}
.loan-box table tr.item td{
border-bottom: 1px solid #eee;
}
.loan-box table tr.item.last td {
padding-bottom: 20px;
border-bottom: none;
}
.loan-box table tr.item.last.results td{
font-weight: bold;
}
.line-graph img {
display: block;
max-width: 800px;
width: auto;
height: auto;
}
* RTL *
.rtl {
direction: rtl;
font-family: Tahoma, 'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif;
}
.rtl table {
text-align: right;
}
.rtl table tr td:nth-child(2) {
text-align: left;
}
</style>
</head>
<body>
#RESULTS#
#LINE_GRAPH#
</body>
</html>
结果.HTML
<div class="loan-box">
<table cellpadding="0" cellspacing="0">
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
#LOAN_NAME#
</td>
<td class="date">
#DATE_CREATED#
</td>
</tr>
</table>
</td>
</tr>
<tr class="heading">
<td>
Loan information
</td>
<td></td>
</tr>
<tr class="item">
<td>
Loan amount
</td>
<td>
#LOAN_AMOUNT#
</td>
</tr>
<tr class="item">
<td>
Interest rate
</td>
<td>
#INTEREST_RATE#
</td>
</tr>
<tr class="item">
<td>
Number of payments
</td>
<td>
#NUM_OF_PAYMENTS#
</td>
</tr>
<tr class="item">
<td>
Extra payments
</td>
<td>
#EXTRA_PAYMENTS#
</td>
</tr>
<tr class="item last">
<td>
Estimated payoff date
</td>
<td>
#PAYOFF_DATE#
</td>
</tr>
<tr class="heading">
<td>
Results
</td>
<td></td>
</tr>
<tr class="item">
<td>
Monthly Payments
</td>
<td>
#MONTHLY_PAYMENTS#
</td>
</tr>
<tr class="item">
<td>
Total interest
</td>
<td>
#TOTAL_INTEREST#
</td>
</tr>
<tr class="item">
<td>
Interest Savings
</td>
<td>
#INTEREST_SAVINGS#
</td>
</tr>
<tr class="item">
<td>
Time saved
</td>
<td>
#TIME_SAVED#
</td>
</tr>
<tr class="item last results">
<td>
Total loan amount
</td>
<td>
#TOTAL_LOAN#
</td>
</tr>
</table>
</div>
我用来捕获图像的功能也可能在 iOS 13 中受到影响。我注意到，当我在 CSS 中将图像的宽度增加到疯狂的数量时，图像的分辨率非常低。这让我觉得 iOS 13 中生成的图像非常小。为什么？我没有什么神圣的想法。
func takeScreenshot() -> UIImage {
// Begin context
UIGraphicsBeginImageContextWithOptions(self.bounds.size, false, UIScreen.main.scale)
// Draw view in that context
drawHierarchy(in: self.bounds, afterScreenUpdates: true)
// And finally, get image
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
if (image != nil)
{
return image!
}
return UIImage()
}
新发现
我相信问题出在上面的 takeScreenshot 函数中。我打印了图像变量，这就是我发现的。
iOS 12
Optional(<UIImage: 0x6000016fc070> size {575.33333333333337, 350} orientation 0 scale 3.000000)
iOS 13
Optional(<UIImage:0x6000013637b0 anonymous {575.33333333333337, 350}>)
为什么尺寸被匿名取代，为什么方向和比例缺失？如果我能回答这个问题，那么我就能解决这个恼人的问题。
Solved
我发现了这个问题。我的解决方案发布在下面。
