一番カンタンにダウンロードを実装する方法 HTMLでファイルや画像をdownloadする為の単純な実装はこんな感じだとおもいます。 html 1 <a href="ダウンロードファイルのパス" download="ダウンロードした時のファイル名">click</a> ただ、この実装では画像がクロスドメインの場合はダウンロードできません。また、safariでは別タブが開き右クリックで画像を保存しないとダウンロードできなかったりします。 やりたかったこと HTMLのimgタグで表示している画像をクリックすると、画像をダウンロードさせる。という仕様を実装した時に色々苦労したのでメモしておきます。処理の順序としては以下の順番で説明します。またTypeScript用の型も指定しておきます。 画像URLからnew Image()する クロスドメインを回避する方法 canvasにdrawImageしてjpegに変換してbase64にする base64からBlobに変換してFileSaverを使ってダウンロードさせる safariでダウンロードフォルダーに保存させるために使用 画像URLからnew Image()する 画像URLからHTMLImageElementインスタンスを作成します。 js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 async load(imageURL) { let imageSouce = await imageLoader(imageURL); } imageLoader(imageURL) { return new Promise((resolve, reject) => { let image= new Image(); image.

続きを読む

プロフィール画像

こたぽん

ビールと生ハムが好き

フロントエンドエンジニア

Tokyo