GitHub - gokerDEV/canvasResize: Javascript Canvas Resize Plugin. It can work both with jQuery and Zepto. It's compatible with iOS6 and Android 2.3+You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
モバイルブラウザでの画像アップロードについて覚え書き
前置き スマートフォンブラウザで画像アップロードしたいという要件があったので、あんまり無理しないで実装できるとこまでやったら、どうなるのかやってみた。 やりたいことは、アップロードに加えて、画像データにリサイズ処理を適用すること。さすがに3G回線で2MB近い画像データを、input[type="file"]でそのまま送りつけるのは無理がある。 某所で書いたブツの要約版なので、某所のほうを見た諸氏はアレでソレして解釈してください : ) サンプルコード 基本方針としては、以下のようなコードで処理することになる。 var elFileInput = document.getElementById('js-select-photo'), elPreview = document.getElementById('js-preview-photo'), createObjectURL = windo
File APIとCanvasで画像をリサイズしてアップロード - SPICY SPACE BLOG
以前自分の結婚式のために作った画像投稿サイトで、クライアント側で画像のリサイズを行う投稿フォームを作ったときのことを書きます。 自分の結婚式に写真投稿サイト作ってみた話。 - SPICY SPACE BLOG HTMLで画像投稿する必要性 結婚式の来場者に、式中の写真をスマホから投稿してもらうサイトなので、 スマホで撮影した2MB近い画像を、3G回線でアップロードするにはムリがあります。 かといって撮った写真を別アプリでリサイズしてからアップして下さいっていうのはユーザーに負担をかけすぎなのでナシ。 そもそもスマホアプリとして作るというのも検討しましたが、iOSの場合、アプリを一般公開しないといけないですし、まぁ結婚式の準備と平行してiOS、Android両対応のアプリを作る余裕は全くありませんでした(笑) ということで、Webサイト上でスマホの写真をリサイズする必要がありました。 実装方
Canvas に描いた画像を png などの形式の Blob に変換する方法
canvas の DOM エレメント (コンテキストではない) から toBlob() を使う、というのが一番簡潔な回答です。が、これは Firefox には実装されているので すが、残念ながら Chrome にはまだ実装されていませ ん。そこで下記の方法 を使って png や jpeg など、任意の画像形式で Blob を作ることができます。 /*** canvas に絵を書くコード ***/ var type = 'image/jpeg'; // canvas から DataURL で画像を出力 var dataurl = canvas.toDataURL(type); // DataURL のデータ部分を抜き出し、Base64からバイナリに変換 var bin = atob(dataurl.split(',')[1]); // 空の Uint8Array ビューを作る var buf
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - blueimp/JavaScript-Canvas-to-Blob: JavaScript Canvas to Blob is a function to convert canvas elements into Blob objects.
