タグ付けされた質問 「data-uri」

私はgreasemonkeyのユーザースクリプトのソースを見ていたところ、CSSに次のことがわかりました。 .even { background: #fff url(data:image/gif;base64,R0lGODlhBgASALMAAOfn5+rq6uvr6+zs7O7u7vHx8fPz8/b29vj4+P39/f///wAAAAAAAAAAAAAAAAAAACwAAAAABgASAAAIMAAVCBxIsKDBgwgTDkzAsKGAhxARSJx4oKJFAxgzFtjIkYDHjwNCigxAsiSAkygDAgA7) repeat-x bottom} greasemonkeyスクリプトは、サーバー上でホストするのではなく、ソース内で可能なすべてのものをバンドルすることを望んでいることを理解できます。しかし、このテクニックを以前に見たことがなかったので、その使用を検討しましたが、いくつかの理由で魅力的であると思われます。 ページ読み込み時のHTTPリクエストの量を減らし、パフォーマンスを向上させます CDNがない場合は、画像とともに送信されるCookieによって生成されるトラフィックの量が減少します CSSファイルをキャッシュできます CSSファイルはGZIPPEDできます IE6（例えば）が背景画像のキャッシュに問題があることを考えると、これは最悪の考えではないようです... それで、これは良い習慣か悪い習慣ですか、なぜそれを使用せず、画像をbase64エンコードするためにどのツールを使用するのですか？ 更新-テストの結果 画像でテスト：http://fragged.org/dev/map-shot.jpg - 133.6Kb テストURL：http : //fragged.org/dev/base64.html 専用のCSSファイル： http://fragged.org/dev/base64.css - 178.1Kb GZIPエンコーディングサーバー側 クライアントに送信される結果のサイズ（YSLOWコンポーネントテスト）：59.3Kb クライアントブラウザに送信されたデータの保存：74.3Kb いいですが、小さい画像にはあまり役に立たないと思います。 更新：Googleのソフトウェアエンジニア、ブライアンマクエードは、PageSpeedに取り組んでおり、ChromeDevSummit 2013で、CSSのdata：urisは、講演中にクリティカル/最小限のCSSを提供するためのレンダリングブロッキングアンチパターンと見なされると述べました#perfmatters: Instant mobile web apps。http://developer.chrome.com/devsum​​mit/sessionsを参照してください。実際のスライド

475 css  base64  background-image  data-uri 

たとえば、リンクをたどる場合： data:application/octet-stream;base64,SGVsbG8= ブラウザは、ハイパーリンク自体にbase64として保持されているデータで構成されるファイルをダウンロードするように求めます。マークアップでデフォルト名を提案する方法はありますか？そうでない場合、JavaScriptソリューションはありますか？

225 javascript  html  url  data-uri  save-as 

私は、誰もがブラウザからアクセスできる完全にJavaScriptベースのzip / unzipユーティリティを作成するというアイデアを試しています。zipをブラウザに直接ドラッグするだけで、その中にあるすべてのファイルをダウンロードできます。また、個々のファイルをドラッグして新しいzipファイルを作成することもできます。 サーバーサイドでやった方がいいと思いますが、このプロジェクトはちょっとした楽しみのためだけのものです。 利用可能なさまざまな方法を利用すれば、ファイルをブラウザーにドラッグするのは簡単です。（Gmailスタイル） エンコード/デコードはうまくいけばうまくいくはずです。私はいくつかのas3 zipライブラリを見たので、私はそれで大丈夫だと確信しています。 私の問題は、最後にファイルをダウンロードすることです。 window.location = 'data:jpg/image;base64,/9j/4AAQSkZJR....' これはFirefoxでは正常に機能しますが、Chromeでは機能しません。 私は使用してクロムでうまく画像としてファイルを埋め込むことができます <img src="data:jpg/image;ba.." />が、ファイルは必ずしも画像であるとは限りません。それらは任意の形式にすることができます。 誰かが別の解決策や何らかの回避策を考えることができますか？

126 javascript  data-uri 

キャンバスで画像を開くにはどうすればよいですか？エンコードされている 私は使用しています var strDataURI = oCanvas.toDataURL(); 出力は、エンコードされたbase 64画像です。この画像をキャンバスに描画するにはどうすればよいですか？ を使用しstrDataURI て画像を作成しますか？それは可能ですか？ そうでない場合、画像をキャンバスにロードするための解決策は何でしょうか？

112 image  html  canvas  data-uri 

私が知っているデータURIた複数base64の符号化データは、インライン画像などを用いることができます。今日、私は実際に件名にアニメーション（gif）アイコンが含まれているスパムメールを受信しました。 ここにアイコンだけがあります： ですから、私の頭を越えた唯一のことは、データURIと、Gmailが何らかの種類の絵文字を件名に挿入することを許可したかどうかということだけでした。電子メールの完全な詳細バージョンを確認し、下の画像の件名行をポイントしました。 したがって、GIFは=?UTF-8?B?876Urg==?=データURIスキームに似たエンコードされた文字列から取得されますが、アイコンを取得できませんでした。要素のHTMLソースは次のとおりです。 長い話を短く、より絵文字がたくさんある16進数ですが。彼らはどこにも文書化されていないか、私はそれを見つけることができませんでした。それがデータURIに関するものである場合、Gmailのメールの件名にそれらをどのように含めることができますか？（私はそのメールをアイコンの代わりに表示してyahooメールアカウントに転送しました）、そうでない場合、そのエンコードされた文字列はどのように解析されますか？https://mail.google.com/mail/e/XXXXXX[?]

103 gmail  base64  data-uri 

データURIは、画像やその他のバイナリデータをHTMLに埋め込むための標準的な方法であり、ブラウザのサポートはWeb上で十分に文書化されています。（IE8は、データURIをサポートするIEの最初のバージョンであり、URIあたり最大32 KBのサイズです。他の主要なブラウザーは、それをさらに長くサポートしています。） 私の質問は、デスクトップメールとウェブメールクライアントソフトウェアについてです。 HTML形式の電子メールを作成する場合、標準的な方法では、画像を添付ファイルとして含めるか、外部に読み込みます（つまり、画像の追跡）。これらの両方に欠点があります（一部のクライアントはこれらの添付ファイルをすべてリストしますが、多くは正しく外部画像を表示するためにユーザーのアクションをブロックまたはユーザーに要求します）。したがって、データURIは良い方法のように見えますが、それが電子メールリーダーでサポートされている場合に限られます。 では、この機能のサポートに関する最近の調査へのリンクはありますか？それともこれを調査しましたか？たとえば、CSSサポートの概要は次のとおりです。興味のあるクライアントソフトウェアは次のとおりです。 デスクトップ（バージョン情報を含む）：Outlook、Apple Mail、Thunderbird、Evolution、Lotus Notes、AOL、Eudora ウェブメール： Gmail、Live / Hotmail、Yahoo！メール、AOL モバイル： Android、iPhone

100 html  email  html-email  email-client  data-uri 

リッチテキストエディターを使用すると、ユーザーは保存した画像をデスクトップからエディターにドラッグアンドドロップできます。送信後、画像が表示され、Webページに正しく表示されます。 画像はどこにもアップロードされないため、エディターは画像をbase64でエンコードされた画像として保存します。 <img alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA4QAAAFKCAIAAADKUQaBAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAP+lSURBVHhepP1p32zb 等 しかし、それは表示されません-iPhoneにも、2つの異なるバージョンのOutlookにも表示されません。画像は単に壊れています。base64はすでにWebページで機能しており、ユーザーがオフラインの場合に画像を表示できるため、base64を使い続けたいと考えています。

85 email  base64  html-email  data-uri 

文字列（POSTリクエストを介して提供される）からWebワーカーを作成するにはどうすればよいですか？ 私が考えることができる1つの方法ですが、それを実装する方法がわかりません。サーバーの応答からdata-URIを作成し、それをワーカーコンストラクターに渡すことですが、一部のブラウザーでは許可されていないと聞いています。これは、同一生成元ポリシーのためです。 MDNは、データURIに関するオリジンポリシーについての不確実性を述べています。 注：Workerコンストラクターのパラメーターとして渡されるURIは、同一生成元ポリシーに従う必要があります。現在、データURIが同一生成元であるかどうかについて、ブラウザベンダー間で意見の相違があります。Gecko 10.0（Firefox 10.0 / Thunderbird 10.0）以降では、データURIをワーカーの有効なスクリプトとして許可しています。他のブラウザは同意しない場合があります。 また、whatwgでそれについて議論している投稿もあります。

83 javascript  web-worker  data-uri 

問題の背景：ページに数学を表示するためにkatexを使用しています。次に、そのページの一部のPDFバージョンを作成したいので、すべてのCSSをインライン化してレンダラーに渡す、エクスポートするパーツを含むHTMLドキュメントを作成します。レンダラーはノードのリソースにアクセスできないため、すべてがインライン化されます。フォント以外は完全に動作します。 url-loaderとbas64-inline-loaderの両方を試しましたが、生成されたフォントはインライン化されていません。生成されたCSSをデバッガーで検査しましたが、古いURLはまだ残っており、フォントのデータURLはありません。 これは私の現在のwebpack.config.jsです： const path = require('path'); const {CleanWebpackPlugin} = require('clean-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { mode: 'development', entry: { "editor": './src/editor.js', "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js', "json.worker": 'monaco-editor/esm/vs/language/json/json.worker', "css.worker": 'monaco-editor/esm/vs/language/css/css.worker', "html.worker": 'monaco-editor/esm/vs/language/html/html.worker', "ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker', }, output: { globalObject: 'self', filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { …

10 javascript  css  webpack  data-uri