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

Rikesh Subedi · Accepted Answer · 2017-11-23 15:55:13Z

5

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)

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

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

edited Nov 23, 2017 at 15:55

answered Oct 22, 2017 at 18:06

Rikesh Subedi

1,85524 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mark · Accepted Answer · 2021-01-05 07:46:12Z

3

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.

answered Jan 5, 2021 at 7:46

Mark

411 silver badge3 bronze badges

Collectives™ on Stack Overflow

Trouble sending base64 image from WKWebView to JavaScript on page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related