魔王のサタンぶろぐ

<img scr="url"/> をダウンロードする手法について

概要

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

結論

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

理由

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

経路

クロスサイトドメインとは

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

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

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

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

だがしかしbad

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

じゃぁどうするの

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

ローカル環境にimageがあってダウンロードする場合の実装方法

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

Chromeの場合

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

IE11(この子)の場合

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

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

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

なぜこの子はダメなのか

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

終わりに

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