JSで画像をダウンロードするのに色々調べたので備忘録です。 間違った点などあればご教授いただければ幸いです。 尚、こちらはChrome、Firefox、IE11で動作確認してます。 ※Safariについては未検証です。 download属性を使えばできるらしい 下記のように、aタグにdownload属性を付与して記述すれば ファイルをダウンロードさせることが出来ます。 これだけで、画像がダウンロードできるようになります。 めっちゃ簡単。 ブラウザの対応 しかし、download属性のブラウザ実装状況 を見ると、、、 Internet Explorer : なし でた。IE。 本当に嫌いです。 実際にやってみると、IEではダウンロードが実行されず そのままページ遷移して画像が表示されてしまいました…。 どうやったらIEでも動くようになるのか どうやら、navigatorオブジェクトに用意され

目次はじめにTL;DR環境・条件詳細完成形解説ボタン追加: addImageDownloadButton画像リクエスト: downloadImage画像保存: downloadImageToLocal参考: axios を使う場合まとめ参考文献 環境・条件Google Chrome バージョン: 79.0.3945.88（Official Build） （64 ビット） 詳細「いらすとや トップページのロゴ画像をダウンロード」を例にダウンロードボタンを作る。 完成形先に完成形。 // ダウンロードボタンを追加 function addImageDownloadButton() { document.body.insertAdjacentHTML( "afterBegin", `<button id="download">ロゴ画像ダウンロード</button>` ); document.ge

例えば画像素材サイトとかだと・・・ 素材ページに飛んだら、自動でダウンロードみたいな機能がついてると思います。 こういう自動ダウンロードは意外と簡単に実装できます。 ここでは JavaScript、jQuery 両方でのやり方・コード例 をまとめてみました。 リンクから手動ダウンロードするやり方 まず１つめは画像のDLリンクを生成する方法について 画像のURLではなく、データ自体をダウンロードするリンクを作るということです。 その手順を箇条書きすると、こんな感じ 画像データをURL化する そのURLを元にリンク要素作成 生成したリンクを埋め込む 大事なのは「画像データをURL化する」というところですね。 JavaScript、jQueryを使ったやり方は次の通り JavaScriptでダウンロードリンクを作るコード例 まずはjQueryとかライブラリを使わず、素のJSでやる方法について コ

FASTCODING-Vietnamのバックエンドエンジニア、ジアンです。 Webサイトを見ていて「ランダムに記事を読み込む」ページを見たことはありますか？ 具体的にはWebサイトを表示すると 最初はりんごに関する記事が1番上に表示されていたのに 同じページを更新してみたら、次はみかんに関する記事が1番上に来ている このようにページを再読み込みしたら、毎回違う記事が表示されるというものです。 この機能は投稿数が多いブログなどに適しています。 ページを更新すると毎回ランダムに違う記事が表示されるので 記事に対しての読みムラが少なくなり、 まんべんなく色々な記事をユーザに読んでもらうことができます。 今回はWordPressでこの機能を実装してみたいと思います。 WordPressで記事をランダムに表示させる方法 まずカスタムページテンプレートを作ります。 下記の2パターン作成したので、お好き

ブログ形式のサイトだとあまりないのかもしれませんが、ECサイトやギャラリーサイトでは投稿一覧の並び替えができると便利だと思います。 サイト閲覧者が「ランダムに並び替える」ボタンをクリックすると、投稿一覧がソートされる方法をまとめました。 ボタンクリックで投稿一覧をランダムにソートする イメージはこんな感じです。 実装はこちらのフォーラムの内容を参考にさせて頂きました。 指定条件による記事一覧の並び替えボタンの実装 殆どこのままなのですが、私はランダムにソートしたいだけなので、このように書き換えました。 [php highlight=”4″] <ul> <?php $url = sprintf( ‘http://%1$s%2$s’, $_SERVER["HTTP_HOST"], $_SERVER["REDIRECT_URL"] ); printf( ‘<li><a href="%s?orde