一番カンタンにダウンロードを実装する方法 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.
HTML5の新機能、Canvasタグのelement（要素）、Attributes（属性）、Methods（関数）の一覧をまとめたCheat Sheet（チートシート）をまとめたページを発見しました。
元ページ：HTML5 Canvas Cheat Sheet v1.x
URL：http://simon.html5.org/dump/html5-canvas-cheat-sheet.html
まだバージョンが１．ｘになっているので今後増えていきそうですね。
iPhone用のページを作成する時は、PCブラウザ用のHTMLファイルのマークアップはそのままでCSSのみiPhone用に作成して、テンプレートを共通化させておきたいものです。
今回紹介するのは、エイチツーオー・スペースが配布を開始した、Dreamweaver CS4/5用のextension（機能拡張）でiPhone向けサイトの手助けをするツールの紹介です。最初にiPhone用のテンプレートを選択し、iPhoneのデザイン風にCSS3でレイアウトされ、Device Centralで表示確認できる流れで制作ができるみたいです。
配布元：iPhone site extension for Dreamweaver CS4/5 | エイチツーオー・スペース[H2O Space.]
http://h2o-space.com/web/product/iphone_dw/
