ウェブページに画像を貼り付け

Question

私はwysiwygエディタのいくつかの研究を行い、素晴らしいと思われるckeditorを見つけましたが、画像をエディタにコピー/貼り付けする必要があります。

私はこのウェブサイトが私が必要とするものを正確に見つけました。http://pasteboard.co/ですが、その可能性はありますが、それがどのように行われたのかわかりません。

アイデアや解決策はありますか？

私は純粋なhtml5/javascriptのソリューションを好み、プラグインは使用しませんが、銀色またはフラッシュも許容されます。

Answer 1

これには2つの方法があり、簡単な方法と難しい方法があります。

The Easy Way： Clipboard APIを利用してください。これは「HTML5」APIですが、Chromeでのみ正しくサポートされています。これにより、クリップボードからペーストした画像にBlobとしてアクセスすることができます。これをXHR2リクエストを介してサーバに送信することができます（Blob）。

ハードウェイ： 残念ながら、これはあなたがChrome以外のすべてのブラウザで行う必要があり、かなりです。これは、 "ペースト対象要素"の中に隠されたコンテンツ編集可能なDIVを作成することを含みます。貼り付けた画像が表示されます。次に、<canvas>に画像を描画し、Blobに変換する必要があります。しかし、待って、それは良くなる。場合によっては、クロスドメインイメージ（サーバー側）をプロキシする必要がある場合もあります（多くの場合可能性があります）。これは、イメージをホストするサーバーがホストしているイメージに対してCORS要求を許可しない場合に必要になることがあります。この状況については、this MDN articleで詳しく読むことができます。

javascriptベースのアップローダFine Uploaderは、すでに画像をアップロードすることができますが、現時点ではChromeでのみサポートされています。私は、十分な要求を受け取った場合、クリップボードAPI以外のブラウザでこれを実装するという面倒を見ることになりました。しかし、確かに、クリップボードAPIを実装していないブラウザで非CORS対応の画像を扱うには、画像サーバー側をプロキシ処理する必要があります（もちろん、私のユーザベースから彼らはそれが欲しい）。

これが役に立ちます。