問題タブ [data-uri]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 画像バイナリをAPI呼び出しからJavascriptのデータURIに変換するにはどうすればよいですか?
私が使用しているGoogleAPIは、画像をバイナリデータとしてのみ送信しています。
これをデータURIに入れて表示する方法がまったくわかりません。助けてくれてありがとう!
私が話している呼び出しは、このAPI呼び出しです。
あなたが見ることができるように、それは言います:
サーバーは写真のバイトを返します。
呼び出し(これは拡張機能です)には、chrome_ex_oauthメソッドを使用します。たぶん、今入ってくる文字列ではなく、実際のバイナリデータを取得するためにヘッダーに何かを追加する必要があります...
私がする必要があるのは、結果のバイナリをデータURIに変換して、表示できるようにすることです。
OK、これはXHRリクエストから取得します
今、私はバイナリのものをあまり知りません。これはどういうわけか私が想定しているエンコードされたバイナリデータですか?これをbtoaや他のbase64エンコーダーに入れようとしましたが、すべてエラーが発生します。さまざまな方法でMimeTypeをオーバーライドしようとしましたが、「応答」が奇妙な方法で変更されましたが、データを受け入れるものはありません。
だから今私はこのコードを持っています:
他の誰かが私のためにこれをデータURIに理解できない応答を取得する方法を知っていますか?
助けてくれてありがとう
svg - データ URI と Graphviz
Graphviz [image] タグを使用してデータ URI 文字列を埋め込むことはできますか? すなわち
simple.dot: (赤い点の画像を表示する必要があります -> ノード B)
これを実行する
これは私が得ているエラーです
結果のグラフは、ノード A のイメージなしで表示されます。
これを修正する方法はありますか?
ありがとう!
firefox - three.jsのDataURI画像テクスチャはFirefoxでは機能しません
私はthree.jsを使用して地質学のオンラインインタラクティブモデリングを行い、Canvas Elementを使用して画像URIを作成しています(出力はdata:image / png; base64、)。
画像の作成はChrome、Firefox、Safariで正常に機能しますが、three.jsの画像をテクスチャとして使用してもFirefoxには表示されません。
私が示すことができる最も簡単なデモンストレーションは、three.jsの例の1行を変更して、dataURIの代わりに画像のURLを使用し、それをテクスチャとして使用することです。
http://visiblegeology.com/renderingProblem/
これはChromeとSafariでは問題なく機能しますが、Firefoxでは表示されません。
誰かがアドバイス、回避策、または考えを持っているかどうか疑問に思いました。
助けてくれてありがとう、
ナナカマド
javascript - 保存時のjavascriptデータURI文字セット
私はutf-8ページで次のようなものを使用しています:
ブラウザにテキストをダウンロードして保存するように強制します。Excelでファイルを開くと、正しく開かない(区切り文字もアラビア文字も読み取れない)ことを除いて、正常に動作します。ファイルがUTF-8であることを指定するには、「データをインポート」する必要があります。これは正しく機能します...ファイルをメモ帳で開いてユニコードで再保存すると...正しく機能します。最初からUnicodeで保存するように強制する方法はありますか?または、Excelでcsvファイルを正しく開きます。
「charset=utf-16」に変更しようとしましたが、機能しませんでした。
PS:ページの文字セットを変更できません。
どんな助けでも大歓迎です。ありがとう
email - 画像を data:uri 形式で GMail に送信できますか?
ユーザーに画像をメールで送信する Web アプリを Django で作成しています。
画像を送信するための最も魅力的な方法は、data:uri形式です。
ただし、data:uri 画像を含むこのメールを GMail アカウントに送信してテストしたところ、メールは表示されますが、画像は表示されません!
Chrome と Firefox の両方で data:uri 画像を開くことができることはわかっています。したがって、ブラウザの問題ではありません。しかし、GMail に data:uri の画像がまったく表示されません。
GMail は data:uri 画像をサポートしていませんか? それとも間違って送っているのでしょうか?
html - ダウンロードしたgzip圧縮されたデータURIのファイル名拡張子を強制するにはどうすればよいですか?
data:URIでエンコードしているGZippedJavaScriptファイルがあります。
例えば:
ユーザーがこのファイルを右クリックして(Chromeで)保存するとき、結果のファイルの名前をにしたいと思いますdownload.js.gz
。このように、ユーザーがこのファイルをダブルクリックすると(Mac OS Xの場合)、ファイルは解凍され、正しく名前が変更されdownload.js
、コンテンツを簡単に表示できます。
問題は、コンテンツタイプtext/javascript
(またはapplication/x-javascript
)を使用すると、ファイルがとして保存されることdownload.js
です。また、コンテンツタイプを使用するapplication/x-gzip
と、ファイルはとして保存されdownload.gz
ます。
ファイルを名前を付けて保存する方法はあります.js.gz
か?
両方のリンクの実際の例を次に示します。http://jsfiddle.net/xYm8w/3/
ファイルはデータURIである必要があり、実際のファイルへのリンクではありません。タグ間のテキストを変更してみました<a>
が、何の影響もありません。
css - 背景画像として使用するために回転した線形グラデーションsvgを取得するにはどうすればよいですか?
私はこれの周りで踊っているいくつかの質問を見たので、これがあまり冗長ではないことを願っています。理想的には、image/svg+xml
コンテナの100%に拡張できるものが欲しいです。
Colorzillaは私に素晴らしいスタートを切りますdata:image/svg+xml
注:width="100%" height="100%"
このグラデーションを使用して回転させたいのですが、 65deg
HTML5キャンバスAPIは、この画像を作成し、.toDataURL()
PNGを使用してIE8とIE7をポリフィルするための優れた方法を提供しますが、IE9用にスケーラブルなものが必要です。 。
したがって、目標はこれを複製することです。
幅とimage/svg+xml
高さは100%です。
http://svg-edit.googlecode.comを試してみましたが、やりたい編集の種類に対してインターフェースが直感的ではありませんでした。ありがとう!
javascript - javascriptにbase64gzip圧縮されたスタイルシート/画像を含めますか?
javascriptファイル内にbase64形式で保存されている他のファイルタイプの中でも、cssと画像を含めることができることを私は知っています。ただし、これらはかなり巨大です...そしてgzipで圧縮されているため、base64エンコーディングからのオーバーヘッドが約33%であっても、LOTが縮小されます。
gzipされていない画像は、data:image / gif; base64、data:image / jpeg、data:image / png、cssはdata:text /css;base64です。次に、gzipで圧縮されたcssまたは画像データURIを含めるために、どのmimeタイプを使用できますか/使用する必要がありますか?(または、gzip + base64が機能しない場合、JavaScript内にデータを保存したまま、文字列のサイズを小さくするために他にできる圧縮はありますか?)
..編集..質問は誤解されていると思います。javascript内にgzip圧縮されたbase64文字列を含める必要があるかどうかは尋ねていません。はい、ほとんどの場合、サーバー側でjavascriptやその他のファイルをgzipで圧縮するのが最善だと思います。しかし、それはユーザースクリプトには当てはまりません。ユーザースクリプトにはサーバーがなく、単一のファイルのみで構成されています。Firefoxでは@requireディレクティブが許可されていますが、OperaとChromeでは許可されておらず、ローカルファイルのセキュリティの問題がローカルファイルの読み込みに関係しています。したがって、スクリプトに必要なものはすべて、1)Web上(遅い)または2)ユーザースクリプトに埋め込まれている(大きい)必要があります。
ここで、この質問は、遅いよりも大きい方が望ましいと想定していますが、その大きいということは、どれだけ大きいかを完全に無視することを意味する必要はありません。それを小さくすることができれば、それは改善です。
したがって、base64文字列がjavascriptに埋め込まれていると仮定すると、問題はそれを意味のあるものにする方法です。
また:
1)atob()は、javascript内でrawbase64でエンコードされたgzipをrawgzipに変換できます。(atobはメディアタイプを知る必要はありません)。問題は、その生のgzip圧縮されたcssまたは画像ファイルを解凍して、結果の出力をドキュメントにフィードできるようにする方法です。
または2)適切なメディアタイプが与えられた場合、ブラウザは少なくとも理論的には(datauri RFCに従って)datauriから直接任意のファイルをロードできる必要があります。「」は、gzip圧縮されていないcssスタイルシートをロードするのに十分です。ここでの問題は、どのリンクタイプ属性とdatauriメディアタイプの組み合わせが機能する必要があるか(そしてどのブラウザで機能するか)です。できれば、ユーザースクリプトの場合、これはOpera、FF、およびChromeで機能する組み合わせになります。
html - data-uri としてエンコードされた空白の画像
スライドして表示される前にジャストインタイムで画像をプリロードする画像スライダー (素晴らしいbxSliderに基づく) を作成しました。すでにかなりうまく機能していますが、私の解決策は有効な HTML ではないと思います。
私の手法は次のとおりです。最初のスライド画像を通常どおり挿入し ( を使用<img src="foo.jpg">
)、その後の画像を のようなデータ属性で参照して、スライダー マークアップを生成します<img data-orig="bar.jpg">
。次に、必要に応じて Javascript がdata-orig -> src
変更をジャグリングし、プリロードをトリガーします。
言い換えれば、私は持っています:
src=""
空の属性 (一部のブラウザーではパフォーマンスに悪影響を及ぼします)を避けるために、空白の画像をプレースホルダーとして効果的に挿入するように挿入しました。src="data:"
問題は、これが有効なデータ URI であるかどうかを示すデータ URI のドキュメントに何も見つからないようです。基本的に、空白/透明な画像に解決される最小限の data-URI が必要なので、ブラウザーはすぐに src を解決して先に進むことができます (エラーやネットワーク要求なしで)。多分src="data:image/gif;base64,"
もっと良いでしょうか?
javascript - JavaScriptを使用してHTMLをdata:text/htmlリンクに変換する
これが私のHTMLです:
JavaScriptを使用して、リンクの属性が、ソースがのでhref
あるbase64でエンコードされたWebページを指すようにするにはどうすればよいですか?innerHTML
div#html
JavaScriptを除いて、基本的にここで行ったのと同じ変換(base64チェックボックスをオンにした状態)を実行したいと思います。