一番カンタンにダウンロードを実装する方法 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 まだバージョンが1.xになっているので今後増えていきそうですね。

続きを読む

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/

続きを読む

プロフィール画像

こたぽん

ビールと生ハムが好き

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

Tokyo