Trouble sending base64 image from WKWebView to JavaScript on page

Question

I'm trying to send a Base64 representation of a UIImage in iOS to a Web View and I think I'm running into an error where the string is being escaped in JavaScript because of special characters, but I'm not quite sure how to handle that. This is what I have to far...

func imagePickerController(_ picker: UIImagePickerController,
                           didFinishPickingMediaWithInfo info: [String : Any])
{
    let chosenImage = info[UIImagePickerControllerOriginalImage] as! UIImage

    let thumb = chosenImage.resized(toWidth: 72.0)

    let imageData:NSData = UIImagePNGRepresentation(thumb!)! as NSData

    let dataImage:String = imageData.base64EncodedString(options: .lineLength64Characters)

    webView?.evaluateJavaScript("window.settings.setImageBase64FromiOS('\(dataImage)');") { (result, error) in
        if error != nil {
            print(error!)
        } else {
            print("Success")
        }
    }
    dismiss(animated:true, completion: nil) //5

}

I keep getting this error logged to the console.

WKJavaScriptExceptionMessage=SyntaxError: Unexpected EOF

Answer 1

I also encountered the same problem and I tried encoding the string before sending to javascript as follows:

let encodedString: String = dataImage.addingPercentEncoding(withAllowedCharacters: .alphanumerics) ?? ""

In Javascript code, before adding to image source,

var originalImageData = decodeURIComponent(encodedImageDataString)

PS: hope you have the final image data with prefix in this format data:;base64, for eg.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAIAAACx0UUtAAAAAXNSR0IArs4c6QAA...

Answer 2

I encountered the same problem but managed to get it to work by setting the base64EncodedStringWithOptions parameter to 0 instead of 'lineLength64Characters'. I think the line breaks were the problem, '0' sets it to no line breaks.