下記の画像をダウンロードしたいとき、右クリックで保存するのが一般的ですが、サイトの都合によってボタンを押したときにダウンロードが始まるようにしたい場合があります。
下記のリンクをクリックするとダウンロードが始まります。
ダウンロード
ソースはこちら
<a href="https://www.kipure.com/shared/api/my/dl_img/?img=/img/demo/cat/001.jpg" download="cat.jpg" class="demo_btn">ダウンロード</a>
ただし、この制御は同じドメイン内のコンテンツのみ有効です。
他人のサイトのコンテンツを勝手にダウンロードさせるのは、お薦めではないということですね。
そして、リンク先をよくみると画像をそのまま表示していません。
さらにdownload属性はsafariではまだ実装されていないようで、上記ではリンク先にてダウンロードさせるPHPをかましています。
PHPでは、ファイルの有無チェックをし、描画とContent-Disposition: attachmentに設定をし、添付ファイルの宣言を行なっています。
$file=filter_input(INPUT_GET,"img");
if(preg_match("/\.(jpg|png|gif)$/",$file)){
header("Content-type: application/octet-stream");
header("Content-Disposition: attachment; filename=\"$file\"");
readfile($file);
exit;
}
コード選択
しかしながらiPhone,Androidともにブラウザでは2019/3時点、対応していないようでダウンロードが始まらない状況でした。
ブラウザからローカルに保存させるということは、なかなか手間がかかるようです。