이미지에 데이터 저장

Question

내 서버에서 클라이언트로 전송 된 JSON 데이터를 얻는 방법을 알아 내려고 자바 스크립트를 사용하여 클라이언트 측을 평가했습니다.

지금은 JSON 문자열을 다시 시도하는 간단한 XHR 호출로이 작업을 수행합니다. 이 잘 작동하지만 문제는 차단하는 것입니다. 이 잘 작동하고로드되는 페이지의 나머지 부분을 차단하지

var head = document.getElementsByTagName("head")[0]; 
    script = document.createElement('script'); 
    script.id = 'myScript'; 
    script.type = 'text/javascript'; 
    script.src = "myScript.js"; 
    head.appendChild(script); 

:

는 내가 뭘 원하는 주문형 같은 자바 스크립트를로드하여 내의 .js 파일을 다운로드를 시작하는 것입니다.

"myScript.js"에는 페이지로드가 완료되면 트리거되는 onload 함수가 있습니다. 이 함수에는 JSON 문자열을 검색하는 서버에 대한 호출이 있습니다.

문제는 onload 함수이므로 페이지로드가 완료 될 때까지이 JSON을 검색하지 못합니다.

그래서 onload 이벤트가 트리거되기 전에 JSON 문자열을 다운로드하는 방법을 찾고 있지만 페이지로드가 차단되지 않습니다.

내 아이디어는 데이터를 gif 서버 사이드에 저장하고 페이지의 일부로 다운로드하기 시작한 다음 onLoad에서 내 기능을 트리거하고 gif를 javascript를 사용하여 JSON으로 변환하려고합니다.

희망적 이군!

Answer 1

PNG 파일을로드하고 자바 스크립트와 HTML5 캔버스 개체를 통해 읽을 수 있습니다. 요지는 이미지를 캔버스 요소에 그립니다. 그것이 그려진 후에 Javascript를 통해 읽습니다. 여기 내 연구의 코드 (https://github.com/ijoey/datainimage)가 있습니다.이 스크립트는 JSON 객체를 문자열로 직렬화하고 해당 데이터를 배열에 저장 한 다음 캔버스 요소에 그립니다. 그런 다음 다시 읽습니다.

여기 Github에서 내 코드에 대한 링크입니다 : https://github.com/ijoey/datainimage/

내가 그것을 수행하는 방법에 대한 다음 문서 진형 : http://blog.nihilogic.dk/2008/05/compression-using-canvas-and-png.html

Answer 2

아니요, 이해가되지 않습니다. 당신의 아이디어입니다.

1. 데이터를 gif에 저장하려고했습니다. 서버 스크립팅을 통해 가능하다고 생각합니다.
2. 페이지의 일부로 다운로드하려고합니다. 이 문서 자산/자원 있다면 좋아, (당신은 <img>로 넣어, 또는 당신은 가능한 new Image를 사용하여 자바 스크립트를 통해 다운로드합니다.
3. onload, 기능이 발생됩니다. GIF는 JSON으로 변환됩니다. 내가 모르는 무엇을 당신은 어쩌면 당신은 Base64 인코딩을 통해 데이터 URL로 변환 할이 뜻.
4. ??
5. 이익!

당신이 4 단계에서 달성하고자하는 것을 분명히 볼 수

, 당신이 전에 이익을 얻으십시오.

• gif가 JSON 서버 측 또는 클라이언트 측으로 변환 되었습니까?

어쨌든 그냥 페이지로드를 차단하지 않고 XHR를 통해 JSON 것을 다운로드 찾고 있다면, (어쩌면 당신은 자산을 포함한 의미)하지만, DOM은 메모리에 바로 후, 당신은 window에 대한 DOMContentLoaded 이벤트 리스너를 사용할 수 있습니다. 그리고 XHR은 기본적으로 비동기식이기 때문에 (다른 방법을 사용하지 않는 한) 다른 자바 스크립트 액션은 평소처럼 진행되어야합니다.

그런데 설명이 있다면 질문에 추가하십시오. 차단하지 않고 JSON을 다운로드하는 방법과 관련된 부분에 대해서는이 답변에 대한 의견을 말할 수 있습니다.