강제 붙여 넣기 이벤트는 base64로 이미지를 인코딩하는

Question

배경 :

나는 기본적으로 데이터베이스에 정보를 저장 (Google 문서 도구와 유사) 서식있는 텍스트 편집기 내 회사에 대한 HTML5 웹 애플리케이션을 개발하고 있어요.

우리는 CKEditor 3을 richtext 편집기 및 Jquery로 사용하여이 문제를 해결합니다.

Google은 선호 브라우저로 Google 크롬을 선택했습니다.

우리 테어는 현재 알파 테스트 기간에 있으며 18 테스터 그룹을 가지고 있습니다 (앱을 사용할 테스터 그룹 임). 이 사람들은 이기종이지만 거의 모든 사람들이 기본적인 컴퓨터 기술을 가지고 있으며 대부분 MS 워드와 MS 엑셀로 제한되어 있습니다.

.

문제 :

우리의 사용자의 대부분은 여전히 ​​주로 부유 한 플로우 차트를 생성하는 능력에 문서를 정교하게 단어를 사용합니다. 생성 된 콘텐츠를 Chrome에 복사/붙여 넣으면 이미지가 로컬 파일에 대한 링크로 붙여 넣어집니다 (OS : 사용자가/*/임시 폴더에 자동 생성 됨). 즉, 서버가 이러한 파일에 액세스 할 수 없으며 결과 문서 (생성 된 PDF)에 이미지가 포함되지 않습니다.

.

질문 파이어 폭스에서 일어나는 것과 비슷한 내가 base64로 인코딩 할 붙여 넣은 이미지가 강제로 어떻게

?

.

참고은 서버에 SRC =으로 참조 이미지 "업로드"할 수 있다면

"파일 : // C : \ 뭔가"나는 base64로 나중에 해당 이미지를 인코딩 할 수있는, 내 문제를 해결할 것 .

우리의 문제를 완전히 해결하지 못하기 때문에 파이어 폭스로 전환 할 수 없습니다 (이미지가 텍스트와 함께 붙여지면 파이어 폭스는 base64로 인코딩하지 않습니다). 수평 스크롤바가 나타나거나 텍스트가 너무 길어 텍스트 영역에 맞지 않는 경우

Answer 1

나는 믿습니다.

붙여 넣기 이벤트를 가로 채고 붙여 넣은 이미지를 파일로 가져온 다음 FileReader을 사용하여 파일을 데이터 URI (64 진 인코딩 PNG)로 읽을 수 있습니다.

그러나 Word는 도메인 간 요청 (http://... 및 file:///...)으로 인해 (적어도 Chrome에서는) 보안 예외가 발생하는 로컬 파일에 대한 참조를 보내는 것처럼 보입니다. 내가 아는 한 해당 로컬 파일의 실제 내용을 가져올 방법이 없으며 내용은 이 아니며은 클립 보드 데이터 자체로 전송됩니다.

"순수한"이미지 (예 : 페인트)를 복사하면 다음과 같이 기본 64 인코딩 데이터를 얻을 수 있습니다 : http://jsfiddle.net/pimvdb/zTAuR/. 또는 div : http://jsfiddle.net/pimvdb/zTAuR/2/에 기본 64 인코딩 PNG 이미지를 추가하십시오.

div.onpaste = function(e) { 
    var data = e.clipboardData.items[0].getAsFile(); 

    var fr = new FileReader; 

    fr.onloadend = function() { 
     alert(fr.result.substring(0, 100)); // fr.result is all data 
    }; 

    fr.readAsDataURL(data); 
};