imgur에서 이미지 붙여 넣기가 Firefox에서 어떻게 작동합니까?

Question

1. 이미지 편집 프로그램을 열고 이미지를 복사하십시오. (브라우저에서 복사하지 마십시오. 나중에 설명 할 것입니다).
2. 열기 파이어 폭스를 가서는 이미지에서 완전한 경악에 봐 V
3. +을 눌러 Ctrl 키
4. http://imgur.com로 업로드하기 전에 복사됩니다.

Chrome과 함께 잘 작동하는 HTML5 클립 보드 API에 대해 알고 있습니다. 이진 이미지 데이터를 붙여 넣을 때 크롬에서 브라우저는 ['Files'] 같다 event.clipboardData.types를 포함하는 paste 이벤트, 나는 그러므로 나는 바이너리 이미지 데이터를 붙여 파이어 폭스에서

var index = event.clipboardData.types.indexOf('Files'); 
if(index !== -1) { 
    var blob = event.clipboardData.items[index].getAsFile(); 
} 

으로 클립 보드에 내 이미지를 얻을 수 있습니다 화재 브라우저에서도 붙여 넣기 이벤트가 발생하지만 event.clipboardData.types은 비어 있습니다 (length === 0 있음). event.clipboardData.getData('Files')은 분명히 ""을 반환합니다.

덧붙여서 브라우저에서 이미지를 복사하는 경우 복사 된 <img> 요소를 보유하는 clipboardData에 "text/html"항목이 설정됩니다. 따라서 이러한 경우에는 서버에 원격 URL을 보내 문제를 해결할 수 있습니다. 서버에 원격 URL을 보내면 이미지 자체를 다운로드합니다 (서버가 원격 위치에 액세스하는 경우 실제로 보장되지 않습니다). How to obtain data from clipboard in Firefox (내용을하는의 contentEditable <div>을 만드는 것이로 붙여 사용자에게 다음 복사합니다.)

그러나, imgur 그렇게하지 않습니다

에 StackOverflow는이 제안합니다. 어떻게 작동합니까?

Answer 1

면책 조항 : 게시하기 전에 imgur 업로드 시스템을 알지 못했지만 도움이 되었기를 바랍니다. 이 게시물은 코드와 HTML/JS에 대한 지식만으로 작성되었습니다.

imgur는 Firefox (일반적으로 Gecko 브라우저)에 다른 붙여 넣기 옵션을 사용하는 것으로 보입니다. 실제로 contenteditable="true" 속성과 함께 색인 HTML에 upload-global-FF-paste-box ID가있는 div가 있습니다. 주요 JS, 우리는 속성 $FFPasteBox의 초기화를 찾을 수 있습니다 그리고

init: function (a) { 
    this._ = $.extend({ 
     el: { 
      $computerButton: $("#gallery-upload-buttons #file-wrapper"), 
      $webButton: $("#gallery-upload-buttons #url"), 
      $computerButtonGlobal: $("#upload-global-file"), 
      $FFPasteBox: $("#upload-global-FF-paste-box") // <--- this line 
     } 
    }, a) 
}, 

에서, global.js 파일에 약간의 파고에 의해, 나는 (위 참조) 이러한 기능을 발견했다. 기본적으로, 프로세스는 다음과 같습니다

1. 가 Ctrl 키-V 행동이 해고 것
2. ,
3. 대기 데이터가 완전히있는 데이터를 검색하기 전에 초점에서 본 contenteditable 사업부를 만들기를 만들기 위해 사용자를 기다립니다 보냈습니다 (고해상도 사진으로 길어질 수 있음)
4. 얻어진 base64 문자열을 분석하십시오.

여기 자신에 의해 global.js에서 추출 주석 코드이다 :

// When a paste action is trigger, set the focus on this div and wait the data to be sent 
initPasteUploadMozilla: function() { 
    $(document).on("paste", _.bind(function (a) { 
     $(a.target).is("input") || this.isInView() && (Imgur.Upload.Index && this.showColorBox(), this._.el.$FFPasteBox.focus(), this.waitForPasteData(this._.el.$FFPasteBox[0])) 
    }, this)) 
}, 

// Listen the user, and waiting that the node is created by the paste action 
waitForPasteData: function (a) { 
    a.childNodes && a.childNodes.length > 0 ? this.processPaste(a) : setTimeout(this.waitForPasteData.bind(this, a), 20) 
}, 

// Check data sent 
processPaste: function (a) { 
    var b = a.innerHTML, 
     // Check if the thing pasted is a <img tag or a png or at least base64 stuff 
     c = { 
      image: -1 != b.indexOf("<img") && -1 != b.indexOf("src="), 
      base64: -1 != b.indexOf("base64,"), 
      png: -1 != b.indexOf("iVBORw0K") 
     }; 
    if (c.image && c.base64 && c.png) { 
     var d = b.split('<img src="'); 
     d = d[1].split('" alt="">'); 
     var b = { 
      dataURL: d[0], 
      file: { 
       size: this.bytesizeBase64String(d[0].length) 
      } 
     }; 
     this.addBase64(b) 
    } else { 
     var e = $(a).find("img"), 
      f = null; 
     if (e.length > 0 && e.attr("src").length > 0 ? f = e.attr("src") : b.length > 0 && (f = b), null !== f && f.match(this._.urlRegex)) this.queueUrl(f); 
     else if (null !== f) { 
      var g = $(f).filter("a"); 
      g.length && g.attr("href").match(this._.urlRegex) ? this.queueUrl(g.attr("href")) : this.showError(this._.messages.urlInvalidError) 
     } 
    } 
    a.innerHTML = "" 
},