2

My app generates a PDF using WKWebView, based on an HTML template and local files. The user creates 2 drawings, and the PDF will show both drawings. This app has been working for years on all iOS versions, but now on iOS 15 it is showing the 2nd image in both spots on the PDF.

So, my question is why does WKWebView show the same image twice even though each imc src is different?

This is the code that saves each drawing:

if drawingImage != nil {
    let drawingPath = getDrawPath(date: drawingDate, drawingNumber: isDrawing1 ? 1 : 2) // Path: Draw/092721075654-drawing1-s-draw.png
                    
    if let data = drawingImage!.pngData() {

        if let fullPath = getFullPath(relativePath: drawingPath) { // Get full path on device

            if (try? data.write(to: URL(fileURLWithPath: fullPath), options: [.atomic])) != nil {

                // Set path in object               
                if isDrawing1 {
                    doc.drawingPath1 = drawingPath
                }               
                else {
                    doc.drawingPath2 = drawingPath
                }
            }
        }
    }
}

This is the HTML template for displaying drawings on the PDF:

<img src="#DRAWING_1_SRC#" style="height: 50px;" alt="Drawing 1" />
<br/>
<img src="#DRAWING_2_SRC#" style="height: 50px;" alt="Drawing 2" />

This is the code that places the filenames when creating the HTML content

var htmlContent: String = "" // Contains the HTML for the entire document, but for brevity, I am just showing it empty here

var drawingPath1 = ""
if let imageLocation = getFullPath(relativePath: doc.drawingPath1) {
    drawingPath1 = "file:///\(imageLocation)"
}

var drawingPath2 = ""
if let imageLocation = getFullPath(relativePath: doc.drawingPath2) {
    drawingPath2 = "file:///\(imageLocation)"
}

let drawingHTMLContent = drawingHTMLTemplate
    .replacingOccurrences(of: "#DRAWING_1_SRC#", with: drawingPath1)
    .replacingOccurrences(of: "#DRAWING_2_SRC#", with: drawingPath2)

htmlContent = htmlContent.replacingOccurrences(of: "#DRAWING_SECTION#", with: drawingHTMLContent)

And finally, this is the code that loads the WKWebView:

let webConfiguration = WKWebViewConfiguration()
let webView = WKWebView(frame: view.frame, configuration: webConfiguration)
webView.uiDelegate = self
webView.navigationDelegate = self
webView.isHidden = true
        
// Write html content to file
let tempDir = URL(string: "file:///\(FileHelper.getDocumentDirectory()!.appendingPathComponent(Constants.TempHTMLDirectory).absoluteString)")!
let filename = tempDir.appendingPathComponent(Constants.TempDocHTMLFileName)
let file = URL(fileURLWithPath: filename.relativePath)

do {
    // Create temp directory if it doesn't exist
    try FileManager.default.createDirectory(at: tempDir, withIntermediateDirectories: true, attributes: nil)
            
    if DownloadHelper.fileExists(fullPath: filename.relativePath) {
        try FileManager.default.removeItem(atPath: filename.relativePath)
    }
            
    try htmlContent.write(to: file, atomically: false, encoding: String.Encoding.utf8)
} catch let e {
    // failed to write file
    print("Error: \(e)")
}
        
let baseURL = file.deletingLastPathComponent().deletingLastPathComponent()
webView.loadFileURL(file, allowingReadAccessTo: baseURL)
view.addSubview(webView)

To me, it sounds like some sort of cache issue or metadata issue - because the system thinks the 2 are the same image, even though the file path is different.

I have also tried saving the images as JPG files with 0.8 compression, and that fixes the problem for some reason. I do not want to do this as a workaround if there's a better explanation for why I'm experiencing the issue with PNG files.

IMSsam
  • 43
  • 1
  • 6
  • Hi, in my case giving allowingReadAccessTo to the enclosing folder didn't allow the WKWebView to load local images. Instead, I pass the same (relative) file path for both the file and allowingReadAccessTo parameters to the webView.loadFileURL(:) function call. – Ri_ Mar 28 '22 at 07:04

0 Answers0