250x250
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- SWIFT
- HTML
- react
- ipad
- front-end
- 비전공자
- 애니메이션
- 풀스택
- effect
- CSS
- html5
- button
- 비전공 개발자
- IOS
- php
- 개발자
- iPhone
- keyframes
- hover
- 백엔드
- jQuery
- MAC
- 자바스크립트
- xcode
- image
- Animation
- javascript
- 프론트엔드
- css3
- iOS 개발자
Archives
- Today
- Total
비전공자 개발일기
Data(base64Encoded: )'s result nil 본문
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