Blob to byte[]
javascript 에서 blob 으로 되어 있는 부분을 java applet 에서 file 로 저장하는 방법을 찾다가 ref. 1 에서 해결책을 제시해 줬다.
방법을 정리하면 FileReader.readAsDataURL() 로 읽어드리고 이 녀석을 applet 으로 넘겨서 이것을 DatatypeConverter.parseBase64Binary() 를 이용해서 byte[] 로 변환하는 것이다.
아래 대략적인 code 를 작성 해 놨다.
주의할 점은 readAsDataURL() 로 읽은 부분의 앞부분에 "MIME type;encoding" 이 있어서 이부분을 제거해 주고 넘겨야 한다. 자세한 사항은 code 를 참고하자.
responseType
xhr.responseType = 'blob';어쩌다가 저 부분을 빼고 실행을 하니, 받아온 data 를 다르게 처리했다. XMLHttpRequest - Web API Interfaces | MDN 에 따르면 default 는 "text" 인 듯 하다. 필자의 경우는 300kb 이미지 였는데, 500kb 의 length 가 보이기도 했다. 그래서 binary file 을 처리할 때는 responseType 을 잘 set 해줘야 한다.
Codes
// TiddlySaver.java
public int saveFile(final String filename, String myBase64Code) {
byte[] data = DatatypeConverter.parseBase64Binary(myBase64Code);
...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en-US">
<head>
<title>Math Applet Page - JavaScript to Java LiveConnect</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jQuery.twFile.js"></script>
<script id="worker1" type="javascript/worker">
// This script won't be parsed by JS engines
// because its type is javascript/worker.
self.onmessage = function(e) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/resources/testflower.jpg', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
if (this.status == 200) {
// Note: .response instead of .responseText
var blob = new Blob([this.response], {type: 'image/png'});
self.postMessage(blob);
}
};
xhr.send();
};
// Rest of your worker code goes here.
</script>
<script language="javascript">
function enterNums(){
////////////////////////////
// Set FileReader
var myBlob
var reader = new FileReader();
reader.onload = function(e) {
// to get rid of MIME
var r = reader.result;
var data = r.substr(r.indexOf(',') + 1)
TiddlySaver.saveFile("c:\\temp\\_testpic.jpg", data);
}
// Make a worker
var blob = new Blob([document.querySelector('#worker1').textContent]);
var worker1 = new Worker(window.URL.createObjectURL(blob));
worker1.onmessage = function(e){
myBlob = e.data;
reader.readAsDataURL(myBlob);
};
worker1.postMessage(""); // Start the worker.
}
</script>
</head>
<body>
<noscript>A browser with JavaScript enabled is required for this page to operate properly.</noscript>
<script src="https://www.java.com/js/deployJava.js"></script>
<script>
<!-- applet id can be used to get a reference to the applet object -->
var attributes = { id:'TiddlySaver', code:'jstojava.TiddlySaver', width:1, height:1} ;
var parameters = {jnlp_href: 'tiddlySaver.jnlp'} ;
deployJava.runApplet(attributes, parameters, '1.7');
</script>
<p><a href="javascript:enterNums();">Launch Example</a></p>
</body>
</html>
댓글 없음:
댓글 쓰기