大きな画像をJavaScriptでリサイズしてからAjax送信する方法
さてさて、この間 wordpressみたいなドラッグ・アンド・ドロップをVueで実装という記事を公開しました。この記事の目的はユーザビリティだったのですが、ドラッグ＆ドロップ機能の先では画像のアップロードを想定していました。 最近のウェブサイトでは画像をサーバーへ保存するというのは珍しいことではないでしょうが、実はアップロードする側の状況が変化してきたことである問題が発生するようになってきました。 それが・・・ スマホ・カメラの高解像度化のせいで画像アップロードに時間がかかってしまう というものです。 つまり、サイズが大きなファイルをアップロードするのに時間がかかってしまうということですね。 特にまだ日本のウェブサイトは、以下のように確認ページを挟む場合も多く存在していますので、その場合（バリデーションを厳密にするなら）画像サイズが大きい場合は１番と２番で画像をアップロードする必要がでてき
[HTML5] Canvasを画像に変換しサーバへ送信する - ねこの足跡R
Canvasに描画した内容を画像としてサーバへ送信し、そのままサーバに保存してみます。 今回は入力したテキストがそのままCanvasに描画される簡単なサンプルを用意しました。文字色と背景色もおまけで変更できます。もう少し頑張るとバナー画像ジェネレーターとか作れそうですね。 サーバ側のプログラムはPHPを採用していますが、他の言語でも似たような処理になります。 Canvasの内容をサーバへ送信する 実行例 ソース HTML JavaScript PHP 解説 Canvasを画像として取り出す サーバへ送信する サーバでバイナリとして保存する 参考ページ Canvasの内容をサーバへ送信する 実行例 以下から実際のサンプルをお試しいただけます。 miku3.net 左側にあるテキストボックスへ入力するとその場でCanvasに反映されます。同様に文字色や背景色も指定したタイミングでCanvasが
![[HTML5] Canvasを画像に変換しサーバへ送信する - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/cd4ec00f9e7dc008c0692333e4281a83ea17d3a6/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkatsube%2F20231125%2F20231125045644.png)
JavaScript と PHP で画像をクロップ (切り抜き) する方法 - Web/DB プログラミング徹底解説
Web 画面上で画像を切り取るプログラムの作り方を説明します。 まずは出来上がりをご覧ください。ボタンを押すと右側に、切り取られた画像が表示されます。 これは単にその部分を「表示」しているだけではなく、切り取った部分だけの JPEG ファイルを作成してそれを表示しています。 このプログラムの作り方を解説します。が、いろいろな項目を知らないといけないので順を追って説明します。 プログラムの概要 まずはクライアント側は下図のようにいくつかの HTML 要素を重ね合わせています。 一番下にあるのは元画像。それに被さるのは同じ大きさの黒いレイヤーです。 これには透明度が設定されているので、一番下の画像が透けて見えます。 その上にクロップ領域を現す要素を配置しています。これは DIV 要素であり、 この要素の背景画像として元画像が指定されています。画像の内側一部を背景画像と するには backgro
PHPでGDを利用してサムネイルを作成する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
う〜サムネイル、サムネイル。 今PHPでの画像のサムネイル生成方法を求めて全力検索している僕はLIGに勤めるごく一般的なプログラマー。 強いて違うところをあげるとすればGDに興味があるってとこかナー こういう画像を こうしたいんです。 という訳で、今回はPHPでGDを利用してサムネイルを作成する方法です。 まず、対象となる画像をホイホイ設定します。 $image = imagecreatefromjpeg( $file ); $fileにはローカルファイルのパス、またはなんとURLを直接指定することも可能です。（PHPの環境設定次第なんですがね、へへへ） $width = imagesx( $image ); $height = imagesy( $image ); if ( $width >= $height ) { //横長の画像の時 $side = $height; $x = flo
PHPでWEBサイトのスクリーンショットを作成するチュートリアル:phpspot開発日誌
Taking screenshots of websites in PHP PHPでWEBサイトのスクリーンショットを作成するチュートリアルが紹介されています。 スクリーンショットの撮影には wkhtmltopdf というオープンソースソフトウェアを利用します。 このソフト自体がMac OS XやWindows、Linuxで動作するコマンドラインツールとなっているようなのでクロスプラットフォームで動作します。 このツールを使えば、「wkhtmltoimage --quality 50 //phpspot.org/blog/ snap.jpg」のようにコマンドを打つことでスナップショットが撮れます。 コマンドラインオプションが多数あるのでPHPerじゃない方も覚えておいて損はなさそうです。 例えば、 JavaScriptをオフにした状態でスクリーンショットを撮ったり、高さや幅の指定、切抜きの
PHPで画像のリサイズ等が簡単に行えるクラス:phpspot開発日誌
PHP Image Resizer Class : Milaju PHPで画像のリサイズ等が簡単に行えるクラスが公開されています。 こうしたライブラリは同様のものが存在するのですが、便利そうなので公開。 次のように実装時に分かりやすいコードでかつ簡単にリサイズが可能です。リサイズだけではなく、クオリティやmaxサイズといったオプション指定も出来るようになってます。 require_once('class.imgsizer.php'); $imgSizer = new imgSizer(); $imgSizer->type = "width"; $imgSizer->max = 100; $imgSizer->quality = 8; $imgSizer->square = true; $imgSizer->prefix = "sml_"; $imgSizer->folder = "_siz
PHPで画像のリサイズ/切抜き/合成といった処理が簡単に行えるライブラリ「WideImage」:phpspot開発日誌
WideImage - An open-source PHP library for image manipulation PHPで画像のリサイズ/切抜き/合成といった処理が簡単に行えるライブラリ「WideImage」のご紹介です。 PHPからGDを使えばリサイズや切抜きは比較的簡単に出来るものの結構面倒だったりします。 そこで、WideImageを使えば、次のようにオブジェクト指向で簡単に、あとで見ても理解しやすいコードで記述可能です。 WideImage::load('big.png')->resize(50, 30)->saveToFile('small.jpg'); // big.png を読み込んで50x30ピクセルにリサイズしてsmall.jpgに保存 WideImage::load('pic.jpg')->crop('center', 'center', 90, 50)->o
iPhoneに最適化されたイメージギャラリー·Pipho MOONGIFT
男性を中心にiPhoneを持つ人が増え始めている。まだまだシェアは少ないが、PC向けのWebサービスの利用率で言えば、iPhoneのシェアは決して少なくはない。実際、iPhoneを使ってWebサイトを見ているという人も多いのではないだろうか。 PHP製のイメージギャラリー そんなiPhoneで写真を見るのに最適なギャラリーソフトウェアがPiphoだ。 今回紹介するオープンソース・ソフトウェアはPipho、PHP製のiPhoneに特化したギャラリーソフトウェアだ。 Piphoはデータベース不要で使えるギャラリーソフトウェアだ。同じ作者によるソフトウェアにJAIPHOがあるが、JAIPHOはJavaScript + HTMLだったのに対してPiphoはPHPを利用する。よりシステマチックに動作させられるようになったと言えそうだ。 横向き表示にも対応 既存のギャラリーアプリケーションをiPhon
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
