비전공자 개발일기

Data(base64Encoded: )'s result nil 본문

SWIFT/(SWIFT || Xcode)Error

Data(base64Encoded: )'s result nil

HiroDaegu 2023. 2. 28. 20:31
728x90
SMALL

과정 

 

WKWebView를 이용하여 어플을 제작하는 과정에서 기기의 이미지를 웹에 미리보기 같은 곳에서 보여주고 그 정보를 기기로 가져오는 단계에서 data가 출력이 안되는 문제 발생


분석

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
	...
</head>

<body>
	...

    <div style="margin-top: 10px; background-color: #666; width: 250px; height: 250px; border-radius: 50%;">
        <img id="siteOfPhoto" style="width: 100%; height: 100%; background-color: #666; border-radius: 50%;">
    </div>

    <div style="margin-top: 10px;">
        <input type="file" style=" color: #FFF; letter-spacing: 1px; border: none; border-radius: 20px; padding: 10px;" id="photoBTN" onchange="reader(event)">
    </div>
	...    
    <script type="text/javascript">
	...
    function reader(event) {
        const input = event.target
        if(input.files && input.files[0]) {
            const reader = new FileReader()
            reader.onload = function() {
                const dataUrl = reader.result
                const base64Idx = dataUrl.indexOf(";base64, ") + ";base64, ".length
                const base64 = dataUrl.substring(base64Idx)
                // console.log(base64)
                // alert(base64)
                const name = input.files[0].name
                const type = input.files[0].type
                const divArea = document.querySelector("#siteOfPhoto")
                divArea.src = reader.result
                if(window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.imageSelected) {
                    window.webkit.messageHandlers.imageSelected.postMessage({
                        "data": base64,
                        "name": name,
                        "type": type
                    })
                }
            }
            reader.readAsDataURL(input.files[0])
        }
    }
	...  
    </script>
</body>

</html>

웹에서 하나 하나 출력을 해본 결과 정상적으로 잘 나오는 것을 확인

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        ... 
        if message.name == "imageSelected",
            let messageBody = message.body as? [String: Any],
            let dataString = messageBody["data"] as? String,
            let name = messageBody["name"] as? String,
            let type = messageBody["type"] as? String,
            let data = Data(base64Encoded: dataString) {
            print("data: \(data)")
            print("Selected image: \(name) (\(type)), size: \(data.count) bytes")
        ...
       }

앱에서 하나 하나 출력을 해보니 Data(base64Encode: ...) 이 부분에서 값이 출력되다가 사라지는 현상 확인


해 결

몇 시간의 구글링 끝에 도달한 결론

1. Simulator로 테스트를 해서 값이 안 나온것 -> 실제 기기로 테스트를 하니 어느 정도 결과는 나옴

2. Data(base64Encoded: )을 Data(base64Encoded: Data,  options: .ignoreUnknownCharacters)로 수정해서 테스트 하니 정상 -> base64의 결과물(dataString)에 특수문자들이 포함되어 있었는데 이들을 제거해야 정상적으로 나온다는 것을 알게 됨

728x90
LIST