フォースペーストイベントは、base64で画像をエンコードする

Question

背景：

私は基本的にデータベースに情報を格納する（Googleドキュメントと同様）リッチテキストエディタ私の会社のためのHTML5のWebアプリケーションを開発しています。

私たちは、リッチテキストエディタとJqueryとしてCKEditor 3を使用してこれを実現しています。

お気に入りのブラウザとしてGoogleのChromeを選択しました。

私たちのアプリは現在、アルファテスト期間にあり、18テスターのグループ（これはアプリを使用するものと同じものです）を持っています。これらの人々は異質ですが、そのほとんどは基本的なコンピュータ技術を持っており、主にMS WordとMS Excelに限られています。

。

問題：

我々のユーザーの大半はまだ主として豊かなフローチャートを生成する能力に、文書を詳しく説明するために言葉を使用しています。作成したコンテンツをChromeにコピー＆ペーストすると、ローカルファイルへのリンクとして画像が貼り付けられます（OSによって自動的に生成されます）。ユーザーの*/tempフォルダにあります。つまり、サーバーはこれらのファイルにアクセスできず、生成されたドキュメント（生成されたPDF）にはイメージは含まれません。

。私はFirefoxで何が起こるかに似、BASE64でエンコードすることに貼り付けた画像を強制することができますどのように

質問

？

。

ノート

それがサーバーにSRC =として参照画像「アップロード」することができます場合は、「ファイル：\何か：// c」を、私はbase64で、後でその画像を符号化することができますように私の問題を解決するだろう、 。

私たちは私たちの問題を完全には解決していないため、Firefoxに切り替えることはできません（イメージがテキストと一緒に「貼り付け」されていれば、Firefox64はそれをエンコードしません）、水平スクロールバーテキストが長すぎてテキストエリアに収まらない場合。

Answer 1

はい、いいえ、私は信じています。

貼り付けイベントを代行受信し、貼り付けた画像をファイルとして取得した後、FileReaderを使用してファイルをデータURI（Base 64 encoded PNG）として読み取ることができます。

ただし、クロスドメイン要求（http://...とfile:///...）のために、Wordはローカルファイルへの参照を送信するようです（少なくとも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); 
};