サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
こんにちは、Multimedia Engineering Team のいまやです。 Advent Calendar 8日目の記事ですが、特にそういうのとは関係なく好きなことを書きます。 はじめに Canvas で色々やっていると、 Canvas#toDataURL() を使って生成した PNG 画像に独自の情報を埋め込みたくなることがよくあると思います。 今回は、この生成した画像に独自の情報を埋め込む方法を説明したいと思います。 PNG フォーマットおさらい PNG フォーマットについては（以前個人ブログですが）紹介したので、詳しく知りたい方はそちらをご覧ください。 PNG 画像の解析と最適化ツール: http://imaya.blog.jp/archives/6136997.html ここでは簡単なおさらいのみにします。 PNG は以下のような構造になっています。 PNG シグネチャ(8
Greasemonkey のユーザスクリプトなどのJavaScript ソースコード内に画像データを埋め込める、 『data:image/gif;base64,～～～』形式のデータ（dataスキーム）を生成します。 画像ファイルなどのバイナリデータを Base64 エンコードに変換しています。 data スキーマでは、外部ファイルへのアクセスなしにスクリプト内で完結して画像を表示できるため、 小さなアイコンなどの表示には便利です。data スキームは Firefox・Opera では利用できます。 残念ながら Internet Explorer は data スキームに対応していないので利用できません。 やってみよう 画像URL: ▼ ▼JavaScript ソースコード生成結果: ここにソースコード結果が表示されます。 ▼ data スキーム経由の画像表示: 生成したコードの使い方
JavaScriptiPadのSafariは、2カ所から画像のメモリに接続するとリークしガベージされない。iOS、3.2、4.2.1、どちらも起きる。 例えば、2つのimg要素が同じsrcを設定すると、その画像リソースはページのリロードまで2度と離されない。以下のサンプルは、画像ロードが途中で停止し、以降は新しい画像を表示できない。デスクトップのブラウザのように、別のimg要素でプリフェッチして、他のimg要素で表示する手法は使えない。 // imagesにsrcのリストを用意 varelmImage = document.body.appendChild(document.createElement('img')); varelmOther = document.createElement('img'); (elmImage.onload = function(){ documen
例えば、img要素にウェブ上の画像を読み込んで、完了後に何らかの処理を行う必要があったとします。その際、 var image = document.createElement("img"); image.src = "http://www.example.com/foo.png"; image.onload = function() {alert("Loading has finished!");}; var image = document.createElement("img"); image.onload = function() {alert("Loading has finished!");}; image.src = "http://www.example.com/foo.png"; の両者を比べて、どちらが正しいと思いますか？ 蛇足ですが、2行目と3行目が入れ替わっているだけ
Creating effects on websites using jQuery and otherJavaScript has really grown from flashy extras to full on applications in the browser. Part of slick applications is images. They might be part of the content being loaded or something like an icon in an application. But, for those images being added after the page is loaded there can be a time gap while that image is downloaded. To avoid those t
Mon, Jan 1, 0001 Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading. This is a modern vanillaJavaScript version of the original Lazy Load plugin.It uses IntersectionObserverAPI toobserve when the image enters the browsers viewport. Original code was inspired by YUI ImageLoader ut
当ブログの中の人による海外旅行写真サイトで、jQueryのPlug-inを利用した画像の遅延ロードを試してみました。 使用したプラグインは、Lazy Load （Lazy Load Plugin for jQuery）。 このプラグイン、プレースホルダーとして使用する画像...当ブログの中の人による海外旅行写真サイトで、jQueryのPlug-inを利用した画像の遅延ロードを試してみました。 使用したプラグインは、Lazy Load （Lazy Load Plugin for jQuery）。 このプラグイン、プレースホルダーとして使用する画像のサイズを指定することができないため、プレースホルダー画像がロードする画像と同じサイズで表示されてしまいます。これだと色々なサイズの画像があるページでローディングアニメーションを表示させるのに都合が悪いため、少々手を入れました。元にしたバージョンは
Opera で DOM Mutation Event を使用するコードを追記しました。 まとめを追加しました。 Opera パート2に取得できないケースが見つかったため、パート3 を追加しました。 rhino.jpg(幅:300px, 高さ:227px) を、 <img id="rhino" src="rhino.jpg" width="100" height="75" /> と、100 x 75 で表示している場合を例に、画像本来のサイズを取得する方法をご紹介します。 Firefox, Safari,GoogleChrome なら image.naturalWidth と image.naturalHeight を利用します。 image.naturalWidth と image.naturalHeight の初期値は 0 です。画像の読み込みが完了した時点で適切な値に更新されます。
Die Zeiten in denen man ein Computersystem durch herkömmliche Anti-Viren-Software schützen kann sind vorbei. Hacker attackieren immer öfter und gezielt kritische Infrastrukturen und schaffen es nicht selten ganzeNetzwerke lahmzulegen. Der Schaden der dadurch entsteht ist enorm. Insgesamt kann man hierbei von Milliardenbeträgen sprechen. Bereits drei Viertel aller Hackerangriffe erfolgt mittlerwei
画像周りの速度メモ - #生存戦略 、それは - subtech 大量に同じ画像を表示したいとき - 0xFF もっと高速にする方法。 background-repeat and clientX <!DOCTYPEHTML> <html><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <title>background-repeat and clientX</title> <style type="text/css"> #star{ width: 0; height:10px; background:url('http://s.hatena.ne.jp/images/star.gif'); background-repeat: repeat-
画像周りの速度メモ - #生存戦略 、それは - subtechの件。 最終手段として、CSSを使う。 .hatenastar{ display:inline-block; width:11px; height:10px; background:url('http://s.hatena.ne.jp/images/star.gif'); } (function(){ var now = new Date*1; for (var i = 0; i < count; i++) { var span = document.createElement('span'); span.className = 'hatenastar'; container.appendChild(span); } document.title += 'css:' + ((new Date*1) - now); })();
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です -はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。はてなグループに投稿された日記データのエクスポートについて -はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記はてなグループ日記のエクスポートデータは2020年2月28
Reply toはてなブックマークのコンテンツのJavaScript を高速化する -IT戦記 「重い箇所２：HatenaStar.js 1738 行目」で取り上げられていたHatena.Star.Button.reateButton ですが、Flyweight パターンのアイデアと Element.cloneNode() を利用したところ、手元の環境（WinXP,Fx3.0）で7.7倍速くなったのでお伝えしておきます。 修正コード /*Hatena.Star.Button */Hatena.Star.Button = new Ten.Class({createdButton: {},createButton: function(args) { var src = args["src"]; if (!this.createdButton[src]) { var newimg
Not your computer? Use a private browsing window to sign in. Learn more about using Guest mode
The ‘imgPreview’ plugin allows your users to preview an image before clicking onit and, out ofnecessity, will preload the image so when a user does click through toit there is no waiting time! The image preview shows up in a tooltip-like box appearing alongside the user’s cursor when hovering over a link. The plugin is entirely unobtrusive;it does not require any hooks to target specific links
Jcrop » the jQuery Image Cropping Plugin Jcrop Home • Download • Manual • Examples Jcrop is the quick and easy way to add image cropping functionality to your web application.It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications. Feature Overview Attaches unobtrusively to images orblo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
