Ajax的に画像などのファイルをアップロードする方法 ::ハブろぐ
a-blog cmsの開発中、Ajax的にファイルをアップロードする必要があったので、その際の調べ物についてかきます。普通にpostしようにも、JavaScriptでローカルのファイルは扱えないよ、って話で、先輩から「iframeがヒントだ！」的なざっくりとしたアドバイスを頂いたので、それを頼りに調べる。 画面遷移なしでファイルアップロードする方法 - 30からのBlog おお、なるほどなるほど。以下、HTML, JavaScript, PHPのサンプルをメモ。 こんなHTMLをJavaScriptで操作すればいい JavaScript自身が要素の生成を作成してもよいですが、最終的にはこういうHTMLが作成されることになります。 <a href="#" id="uploadTrigger">アップロードするぜー</a> <form id="uploadForm" action="画像POS
PHP GDとSkyBiometryAPIを使って顔座標を浮かしてみましょう | 丸ノ内テックブログ
フロントエンド front end バックエンド back end アプリ開発 app インフラ infra その他 other データドリブン data driven タグ一覧 Ajax（1） Android（20） Apache（2） AR（2） benchmark（1） BigQuery（2） browsersync（1） C4（1） CakePHP（1） CentOS7（1） CI（1） CMS（3） CoreNFC（1） CraftAR（1） CSS（1） DeepLab（2） Dmitry Stogov（1） ECMAScript（1） ECMAScript6（1） ElePHPant（1） Facebook（3） FFmpeg（1） firebase（1） fluentd（1） Framework（1） GD（2） gif（2） Git（1） GLSL（5） Google A
ノンデザイナーでもできる！写真を使ったイケてるメイン画像の作り方 - CAMPHOR- Tech Blog
こんにちは、あんみつ（@murata_atsumi）です。 この記事はCAMPHOR- Advent Calendar 2014の20日目の記事です。 私ブログが超苦手で普段からあんまり書かないから、何書こうか迷ったのですが、 一応CAMPHOR-には主にデザインの部分で関わることが多いので、 デザインのことを書こうと思います！ はじめに エンジニアの皆さん、そしてそうじゃない皆さんも、たまに『メイン画像』を作らなければいけないときがあるんじゃないでしょうか。 メイン画像というのは、こういうのとか （引用：https://www.cyberagent.co.jp/recruit/fresh/internship/ ） （引用：http://tokyometro10th.jp/future/opendata/ ） こういうのとかですね。 または、Facebookページのカバー画像や、OGP用
Youtubeサムネイル画像の取得方法・サイズについて｜ cocope [コードスニペット ココペ]
バイラルメディアなどでよくYoutubeの動画がよく取り上げられていますが、今回はその時によく使われているYoutubeサムネイル画像の取得方法をまとめていきます。 またYoutubeに最適なサムネイル画像のサイズなどもまとめていきたいと思います。 これからYouTuber（ユーチューバー）になろうとしている方もぜひサムネイル画像のデザインにもこだわってみてはいかがでしょうか？ サムネイル画像のサイズについて 様々なデバイスに対応するためなるべく大きなサイズで作成しましょう。下の3点に気をつけてデザインしましょう。 1280×720（最小幅が 640 ピクセル） 16:9のアスペクト比 JPG、GIF、BMP、PNGの保存形式 サムネイル画像の取得について 今度はサイトなどにサムネイル画像を貼り付ける方法です。下の動画を題材にしていきます。 Youtubeで動画を表示させる際に手軽に利用
![Youtubeサムネイル画像の取得方法・サイズについて｜ cocope [コードスニペット ココペ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/ec42c11376df0f43f60a906e947898a876106f6d/height=288;version=1;width=512/http%3A%2F%2Freference.cocole.jp%2Fwp-content%2Fuploads%2F2014%2F10%2Fyoutube.jpg)
[PHP]MySQLを利用した画像の保存と出力|WEBプログラム覚書
HOME>WEBプログラム覚書>[PHP]MySQLを利用した画像の保存と出力 [PHP]MySQLを利用した画像の保存と出力 PHPで画像を取得してMySQLに保存、そしてMySQLからデータを取得して表示させる方法を そろそろ書かないとまずい気がしたので書いておきます。 画像をデータベースに保存するのには、とても重要な意味があります。 その前に、まずは仕組みから。 仕組み 特に難しいことはないのですが、意外と知らない人も多いのではないでしょうか？ 僕もPHPやる前は知りませんでしたw 上図が画像ファイルにアクセスして表示されるまでの簡単な流れです。 まぁこの流れ自体は別にどうでもよくて、今回もっとも重要になるのがレスポンスヘッダのcontent-typeです。 content-typeに絡むWEBサーバとブラウザの役割は、 WEBサーバ 拡張子に応じて適切なcontent-typeをh
PHPから画像を送信する際にキャッシュを有効にしておく - Qiita
認証が必要な画像を送信する際に、PHPでチェックをした上で、送信するが、 何度もリクエストされると嫌なので、ブラウザのキャッシュを有効にして送る。 PHPは標準機能がキャッシュ無効ヘッダ(pragma :no-cache)を送るので、明示的に上書きしないと効果がでない。 <?php $file_name = some_function(); //画像タイプ判別 $type_id = exif_imagetype($file_name); $type_name = image_type_to_mime_type($type_id); //var_dump($type_name); //最終更新日を作成（キャッシュ用） $last_modified = filectime($file_name); ///もしキャッシュ更新確認リクエストなら if(isset($_SERVER["HTTP_IF
URLをいじって Amazon の商品画像をトリミングする
こんにちは、さち です。 以前の記事で、Amazon の商品画像は画像の URL をいじるとリサイズができるという話をしました。 実は、これと同じ要領で画像のトリミングもできます。 仕様を詳しく見ていきましょう。 Amazon の商品画像をトリミングする 今回、例として使うのはこちら。疲れた心を癒やしてくれるアニメ「たまゆら」の CD ジャケット画像です。 TVアニメーション たまゆら～もあぐれっしぶ～ ボーカルアルバム うたとせ この画像のURLをいじって、後ろの女の子「沢渡楓」ちゃんだけをトリミングしてみました。 トリミングした画像のURLがこちら。 https://images-na.ssl-images-amazon.com/images/I/7169UbnSOkL._SX500_CR180,100,200,250_.jpg 注目するのは赤字部分。この部分で「リサイズ」「トリミング
なんでもかんでもpicture要素を使えばいいわけじゃない！レスポンシブ・イメージ実装の際の注意点
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
大量の画像を縮小する時に便利なフリーソフト「縮小専用AIR」 - ヘビとカメとゾウ
2014-09-27 大量の画像を縮小する時に便利なフリーソフト「縮小専用AIR」 IT・ガジェット 先日アップした神戸南京町の記事、多くの方にご覧いただきました。ありがとうございます。 &lt;a href="http://nbnl.hatenablog.jp/entry/2014/09/23/221148" data-mce-href="http://nbnl.hatenablog.jp/entry/2014/09/23/221148"&gt;「秋分の日」 神戸散策 南京町編 - ヘビとカメとゾウ&lt;/a&gt; 「秋分の日」 神戸散策 南京町編 - ヘビとカメとゾウ この記事及びその前のポートタワー記事にて、計47点の写真をアップしました。さすがに元画像のままアップするとフォトライフの容量を食ってしまうので、画像は幅640px✕高さ480pxに縮小
画像サイズを「サムネイル」「中」「大」「フルサイズ」から選択または任意のサイズを指定する
ブロックエディタでは記事に「画像」ブロックを追加し画像ファイルをアップロードすることで記事に画像を表示することができますが、追加された画像をどのサイズで表示するのかを選択することができます。ここではブロックエディタを使っている場合に記事に追加した画像のサイズを選択する方法および任意のサイズを指定する方法について解説します。 画像のサイズを「サムネイル」「中」「大」「フルサイズ」から選択する 画像サイズの選択方法を確認するため、新しい記事を作成し「画像」ブロックを追加しました。 「アップロード」をクリックして、表示する画像ファイルを選択します。今回は画像サイズが 4800 x 3200 の画像をアップロードしました。 画像を記事のなかでどれくらいの大きさで表示するのかの設定は、サイドバーオプションの中の「画像設定」で行います。 「画像サイズ」の下にあるドロップダウンメニューをクリックすると、
レスポンシブデザインの進化はWebの常識を変えるか？ | ゆっくりと…
ある記事 によれば、レスポンシブ Web デザインを採用するサイトの 72% が、デスクトップとモバイルに同じリソースが使われているそうです。またそれらリソースの 60% 以上が画像 という統計や、モバイル用に画像を最適化すれば、データ量を 72.2% 削減できる という調査結果もあります。 ということで、レスポンシブ画像のことを調べていていましたが、その技術進化というか、紆余曲折も含めて色々とある様です。 最新技術を素早く取り入れることはもちろん大事ですが、特に過渡期においては、変化に強いサイトを作るためにも技術の先行きを見極めることが重要です。そこでタイトルのような視点で、これまでの経緯をつらつらと辿ってみました。 自分としてのテーマは、「じゃあ、今、どうするか？」だったのですが…。読んで下さる方の何かに役立つかどうかは甚だ心もとない記事です。 ちなみに今回記事で取り上げた話題について
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Creative Commons Search
有名なWEBサービスブランドロゴのSVGなら大抵ある「Simple Icons」。ブランド色も取得可能。
Flipsblog.jp