概要

imgタグのsrcにある第三者のURLをダウンロードをしたくてしたくて仕方がないから頑張って探した備忘録

結論

HTML,javascript,jquery,では実装できなかった。

クロスドメイン制約があるから。

簡単に言えば第三者のURLを参照してダウンロードとかはできないって話。

基本的にクロスドメインを考えなくていいのはローカルにデータがあるときだけ。第三者のサーバー(URL経由して見れるもの)はローカルにないんですよ。（当然）

次にダウンロードできるようにするために、src=“画像のpath"じゃなくてsrc="実体"にしなきゃいけない。

Blobにできればajax使えばファイルできるしダウンロードもできる。 canvasとかで作成したイメージってtoDataURL()つかってBlobに変換できるからFile型になってダウンロードできるんですよ。

だがしかしbad

Base64でイメージを保持してないのでできるはずがないんです。時々ある、src=“data:/……"みたいなものならクロスドメインに引っかからず『ブラウザ関係なく』ダウンロードをすることができます。

ローカルにあればできるってこと。

canvasにdrawimage()で描写 ↓ toDataURL()で変換 ↓ ajax使ってファイル化って流れになります。

Chromeはクリップボードが非常に優秀なので一応ローカル環境に"imageの実体"が入れられるから自由が利く。コピーが神ってことですね。つまりクリップボードを介すことでダウンロードができるってこと。

はい。これです。僕が実装したかったのはこっちなんです。

この子はクリップボードにimageの実体を入れることができず、がクリップボードに保存されます。要はタグがクリップボードに入るってことですね。

だから、自分のページで他のサーバーのimageを『表示』することはできます。しかし、これを自分のサイトで実体化(Base64変換)を行おうとすると【クロスドメイン制約】がかかるわけですね。

canvasにdrawimage()でURLを渡す（ここがダメ）canvasが汚染されるんです。汚染(クロスドメイン)が発生すると、toDataURL()が発行できなくなり積み。

ソースはテストソースがごっちゃごっちゃしてるので整理したら上げます。取り急ぎ文章で書きました。