[JavaScript] 画像変換：<img>要素 ⇔ Base64（相互変換） - Qiita
<img>要素 ⇔ Base64 相互変換についてのまとめです。注意点として、<img>要素 → Base64 の時は、Ajax同様に JavaScript のクロスドメイン制限があります。つまり、外部サーバーにある画像をBase64形式に変換することはできません。 <img>要素 → Base64 //===================================================== // <img>要素 → Base64形式の文字列に変換 // img : HTMLImageElement // mime_type : string "image/png", "image/jpeg" など //===================================================== function ImageToBase64(img, mim
![[JavaScript] 画像変換：<img>要素 ⇔ Base64（相互変換） - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/363b2491c00ab1557190996fd50c3be73a25a886/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFNyU5NCVCQiVFNSU4MyU4RiVFNSVBNCU4OSVFNiU4RiU5QiVFRiVCQyU5QSUzQ2ltZyUzRSVFOCVBNiU4MSVFNyVCNCVBMCUyMCVFMiU4NyU5NCUyMEJhc2U2NCVFRiVCQyU4OCVFNyU5QiVCOCVFNCVCQSU5MiVFNSVBNCU4OSVFNiU4RiU5QiVFRiVCQyU4OSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NzQ1MWNiZWU0NDBlOTFlODk3YTE5OWQyMzFlMjhjMjk%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5YXN1bW9kZXYmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTFiZGRhNzVhNjliZWZiMTZhZjQ2ODA4MDZmMGY2NzZm%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D0a1a7d3d405005f7f9ed02a615096233)
canvasにローカル画像を表示 - Qiita
概要 html5を使ってローカルに有る画像ファイルを表示する簡単なhtmlを作ってみました。イメージの描画にcanvasを使用しています。 参考にさせて頂いたページ http://qiita.com/junya/items/0f977ae7f8f620fd83e7 http://d.hatena.ne.jp/oovu70/20111122/p1 ソースの説明 ファイルの読み込みに加え、イメージのロードも非同期になりますので、コールバックで処理をしないとcanvasへの描画は上手くいきません。 1. html要素として予め定義しているcanvasをセレクトしています。 2. getContext()メソッドで描画機能を有効にしています。jQueryのセレクタを使っていますのでcanvas[0]とします。 3. naturalHeight, naturalWidthでイメージのサイズを得ること
HTML5/canvas上に読み込んだ画像を貼り付ける | iconDecotter-Log
ここからしばらく、HTML5のcanvasについて書こうと思います。 canvasは、何やら新しいもののように思えますが、実際に操作する時に働くのはjavascriptなので、描画に関するルールや関数を覚えてしまえば、あとはスクリプトが書けるかどうかのお話です。 Canvas – HTML5.JP 基礎的な部分については、他の解説サイトやリファレンスをお読みください。ここではiconDecotterで実装する時にやったことに絞って、メモ的にまとめます。ちなみに、ブラウザはcanvasに対応していることを前提としますので、主にIE8以下等については考慮しません。 そもそも何故canvasを使うのか 実際のところ、Web上の効果表現のみであれば、向き不向きは多少あるものの、jQueryなどのエフェクトを使ったアニメーションで代用が効きます。canvasが活かせるのは、ゲームやドローツール等のイ
HTML5のCanvasを簡単に高機能化してくれるJSライブラリ「Fabric.js」
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <!-- fabric.jsの読込み --> <script type="text/javascript" src="./libs/fabric.js"></script> </head> <body> <!-- canvas要素を用意 --> <canvas id="canvas" width="300" height="300" style="border:1px solid;"></canvas> <script type="text/javascript"> <!-- Canvasオブジェクトを作成 --> var canvas = new fabric.Canvas('canvas'); <!-- ここにコードを書いていきます。 --> </scri
HTML5のcanvasを使ったお絵かきツール詳説
HTML5のcanvasを使ったお絵かきツールを勉強がてら作ってみました。下記の画像リンクをクリックすればサンプルページにジャンプします。 サンプル 以下、サンプルのHTMLとJavaScript（jQuery）を使って、canvasのお絵かきツールについて解説します。 探しきれてないだけと思いますが、お絵かきツールのjQueryでの実装が見つからなかったので、自力で書いてみました。いろいろ間違ってたらすいません。 １．HTML サンプルのHTMLは次のようになっています。 <canvas width="500" height="400">お使いのブラウザはHTML5のCanvas要素に対応していません。</canvas> <ul> <li style="background-color:#000"></li> <li style="background-color:#f00"></li>
ブラウザ上でサインを書けるjQueryプラグイン「jSignature」:phpspot開発日誌
jSignature ブラウザ上でサインを書けるjQueryプラグイン「jSignature」。 CanvasかFlashで描画出来るので多くのブラウザに対応。ウェブサイトにサインを導入したい場合に使えるかも 実装は以下のように超簡単です <script src="libs/jSignature.min.js"></script> <div id="signature"></div> <script> $(document).ready(function() { $("#signature").jSignature() }) </script> データをSVGのbase64形式で取得できたりもするみたい デモページはこちら サイン書いてみました（＾＾） 関連エントリ アイテムを浮遊させられるjQueryプラグイン「jqFloat」 一見普通のテーブルだけどExcel風に使えるjQueryプ
Canvasを使って手書きの署名機能を実装する | カバの樹
環境 ブラウザ：vivald・iOS safari はじめに ルート営業を行うクライアントから、タブレットの契約書に手書きで署名できる機能が欲しいと言われました。 アプリで作ろうか悩みましたが、試しにHTML５で実装したものを提案してみました。 デモ See the Pen eeXqzy by カバの樹 (@kabanoki) on CodePen.0 ソース （2022/04/05 改定版） 戻る進むが機能しない不具合を修正しました。（2022/04/05） IEで動作しない不具合を修正しました。（2018/10/25） HTML <canvas id="canvassample" width="500" height="300"></canvas> <div style="padding:10px"> <button type="button" onclick="clearCanvas
CentOS7(x86_64)+PHP7+CakePHP3環境構築手順メモ - Qiita
yum update -y yum install epel-release -y yum -y update epel-release rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-7.rpm yum -y update remi-release sudo yum -y --enablerepo=remi-php70,epel install php-fpm php-gd php-gmp php-mbstring php-mcrypt php-opcache php-pdo php-pear-MDB2-Driver-mysqli php-pecl-memcached php-pecl-msgpack php-xml php-devel php-gd php-intl
Cakephp3 + CentOS7 + Vagrant + Apache + MySQL 環境セットアップ - Qiita
目次と概要 Cakephpを起動、DBと接続、Cakephpの開発開始できるまでを目標にします。 1. Vagrantのインストールと初期設定を実施します。 2. Vagrantの設定ファイル（provision.sh）に各プログラムのインストールと設定を記述していきます。こうすることで、Vagrant初期起動時に必要なプログラムがインストールされ、次の開発環境セットアップも楽になる。（Anaibleはまだ導入できていません(´；ω；`)） 3. Vagrant起動後にCakephpのインストール、設定を行います。 4. MySQLの設定を行います。 5. ハマりポイント解説 6. 結びに 本編 1. Vagrantのインストールと初期設定 Vagrantのインストールと初期設定は下記サイトを参考に実施しました。 （私はCentOS Linux release 7.3.1611 を使用しま
jSignature
About jSignature jSignature is a JavaScript widget (a jQuery plugin) that simplifies creation of a signature capture field in a browser window, allowing a user to draw a signature using mouse, pen, or finger. Works in all mainstream browsers that support Canvas or Flash Captures signatures as smooth vector images. (Yes, SVG is supported!) Ingenious, super-efficient (i.e. not lagging) real-time cur
2018年2月の、これだけは押さえておきたいWeb関連の動き
「Web系の最新情報を知りたいけど、日々業務が忙しくて追いかけられない」という方のために、1ヶ月のWeb系ニュースの中で「これだけは押さえておきたい」というものを1つの記事にまとめています。 Webデザイン デザイナーの秘密道具@spicagraph デザイン、キャッチコピー、アピールポイントなどの話です。イラスト入りで分かりやすいですね。 Adobe XDで快適！と感じたこと6つ – aicocco’s PhotoLog – g.o.a.t ワイヤーとカンプ、プロトタイプを1つのファイルで できるようになったというのは良いですね。 iOS 11 iPhone GUI | Facebook Design FacebookによるiPhone iOS11 UI素材。PSD、Sketch等。 コーディング CSSで変数（カスタムプロパティ）を使ってみよう | Webクリエイターボックス IE11
node.jsとWebSocketで作る野球盤ゲームの裏側 (1/4)
Expressは雛型として扱うテンプレートエンジンを選択できます。デフォルトのテンプレートエンジンは「jade」です。jadeは以下のようにしてインストールします。 $ npm install jade jadeはXML形式でなく、インデント形式で記述します。jade以外にも、EJSやCoffeeKup、Hamlなどのテンプレートがありますので、好みで選びましょう。HTML形式で書きたい場合はEJSを選択するとよいでしょう。 Expressとjadeをインストールしたら、実際にWebアプリの雛形を作ってみましょう。 $express sample create : sample create : sample/app.js create : sample/logs create : sample/pids create : sample/public/images create : sam
知らなきゃ損する！Web開発で絶対使いたくなる、人気のJavaScriptライブラリ8選と導入方法を公開 - paiza times
どうも、まさとらん（@0310lan）です。 今回は、毎日のように誕生する新しいJavaScriptライブラリの中から、思わず使ってみたくなるようなオススメのライブラリを厳選してご紹介しようと思います。 そのままWebアプリとして活用できそうなモノから、コードの書く量を大幅に減らしてくれたり、ユーザー体験を一気に向上してくれるモノまで、幅広いジャンルをまとめていますので、ご興味ある方はぜひ参考にしてみてください！ ■入力された内容を自動検証する！ 【 Cleave.js 】 フォームなどでよく使う「inputタグ」で、何が入力されたかを検証して意図しないデータ入力を簡単に防ぐことができるのが「Cleave.js」です。 使い方は非常にシンプルで、例えば「電話番号」を入力する「inputタグ」があったとします。 <input type=”tel” id=”input-tell” /> 「in
Canvasで漫画にあるような吹き出しを書いてみた - Qiita
はじめに Canvasを使用して、漫画で使われるような 吹き出し表現を再現してみました。形自体にも汎用性があると思うので、吹き出し以外にも使えそうです。これで漫画表現シリーズは三作目となりました。（今までに書いたものは最下部を参照ください）今回書いた吹き出しは以下の3種類になります。 吹き出しのシッポ（何ていうのか分からない。。発言者を示す細い三角のやつです）は想定していません。 [動作イメージ] パーッとした吹き出し パンクな吹き出し モコモコな吹き出し なお実際の動作は以下で確認できます http://nekoneko-wanwan.github.io/demo/canvas/effect/fukidashi/light/ http://nekoneko-wanwan.github.io/demo/canvas/effect/fukidashi/punk/ http://nekonek
apple-touch-iconはbase64で指定できてJSで後書きできるって知ってた？ - Qiita
var appleTouchIcon = document.getElementById("appleTouchIcon"); var img1 = new Image(); img1.src = "appIcon1.png"; var img2 = new Image(); img2.src = "appIcon2.png"; /* ※実際にやるときは画像のロードを待たないとだめ */ // canvas作成 var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); var size = 152 canvas.width = size; canvas.height = size; ctx.drawImage(img1, 0, 0, size, size); ctx.drawImage
canvasでクロマキー合成っぽいことしてみる - Qiita
CMや映画でよく使われるクロマキー合成をcanvasで再現してみようと思った。 特殊な設備がなくてもいいように消す色を指定できるといいかもね。 やること 映像を取り込む canvasに描画する 描画されたcontextの指定された色の部分を透過にする 背景に画像を入れる ざっくりこんな感じ。 ファイルが別れると載せにくいのでstyleの設定はjsでやる。 とりあえずhtmlファイルに要素を置いておく 必要なのはvideoとcanvas。 あとはどの色を透過にするか指定できるようにinputも置いた。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Language" content="ja"> <meta name="viewport" content="wid
【CyberAgent】技術情報／TechReport - テックレポート／リッチスマートフォンWebアプリのメモリ管理 | 株式会社サイバーエージェント
ディベロッパーズブログ 1pixel にて執筆した内容です。 ブログ記事内容に比べてまとめがほんの少しだけ充実しています。 どこでもピグライフとは PC版ピグライフはFlashでつくられていますが、どこでもピグライフはHTML5/CSS3/Javascriptで制作を行いました。画面遷移をせず、直接エリア上のテーブルや作物をタップして操作したり、メニューを下から引き出したり、ネイティブアプリのような操作を目標にしています。 方針 そもそものメモリ容量が少ないスマートフォン端末で遷移の無いアプリケーションを制作する上で、多少のパフォーマンスを犠牲にしてもこまめにデータを削除する必要がありました。 例えば普段隠れて表示されていない「ピグとも」のビュー部分を画面外に生成しておけば、表示のパフォーマンスは上がるのですが、その分メモリを消費してしまいます。どこでもピグライフでは、ほとんど常に表示され
Web Storage－HTML5のAPI、および、関連仕様
■sessionStorageは、一回限りのセッションで有効なストレージ sessionStorageは、ウィンドウやタブ単位での一回限りのセッションで有効なストレージです。 ウィンドウやタブが開いている間のみデータが保存され、閉じるとデータが失われます。 同じドメインのサイトを別々のウィンドウで開いている場合には、それぞれが別のsessionStorageとなります。 クッキーとは異なり、ウィンドウ間でデータが共有されることはありません。 sessionStorageを利用する一例を挙げてみます。 例えば、2つのウィンドウで同じサイトを開きながら航空券を注文する場合、 クッキーでは買い物かご情報が混在してしまって、同じフライトのチケットを気づかずに2枚注文してしまう可能性があります。 sessionStorageでは、それぞれが別のセッションとなるため、 別ウィンドウの買い物かご情報が混
WebKit Changeset から推察した iOS 7 beta 3 MobileSafari に適用されているかもしれない変更点まとめ - latest log
2013-07-11 WebKit Changeset から推察した iOS 7 beta 3 MobileSafari に適用されているかもしれない変更点まとめ 全て個人的な推測にもとづいています。 サマリー mouseenter, mouseleave イベントのサポート Math.imul のサポート canvas#supportsContext のサポート WebAudio にユーザイベントを経由せず noteOn した場合に音が鳴らないように制限を追加(in iOS) AudioBufferSourceNode の "onended" イベントのサポート canvar#toDataURL("image/jpeg", quality) のサポート(in BlackBerry または 全て?) "audio/speex" MimeTypeのサポート -webkit-backgroun
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.w3ii.com/ja/index.html