問題タブ [image-rendering]
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.
html - キャンバス (および img) の CSS ズームで最近傍を使用する
CSSzoom
プロパティを使用する場合、「バイリニア」やその他の高度なズーム アルゴリズムではなく、ブラウザに「最近傍」を使用させるにはどうすればよいですか?
私の設定はキャンバスを含むdivであり、divはJavaScriptを介してズームセットを取得し、CSSで<div style="zoom:3200%">...</div>
使用している最近傍を取得します。image-rendering: -webkit-optimize-contrast
アプリはこちらから入手できます(「z」でズームイン、「shift-z」でズームアウト)、CSS はこちら
OSX 上の Chrome での目的の効果は次のとおりです (ズームは 3200% に設定されています)。
しかし、これは Windows 7 の Chrome でも同じです。
どちらの場合も、すぐに使用できる「バニラ」Chrome (バージョン 15.xx) であり、実験的なフラグはオンになっていません。
Windows で Chrome に最近傍を使用させるにはどうすればよいですか? さらに言えば、どうすればすべてのブラウザを納得させることができるでしょうか? Safari も最近傍を使用しません (これまでのところ、このアプリは WebKit ベースのブラウザーでのみ動作します)
CSSimage-rendering
プロパティは Chrome/OSX に影響し、望ましい効果が得られます。しかし、Chrome/Windows と Safari(5.1)/OSX はどちらもそれを完全に無視しているようです。運が悪いだけだと何かが教えてくれますが、聞いてみようと思いました。
div コンテナーでの使用zoom
は非常にシンプルで、Chrome/OSX で美しく機能します。キャンバスを内部でスケーリングする必要がある場合は、それも可能です。しかし、可能であれば、文字通り1行のコードソリューションを好むでしょう!
更新: ヘルプの使用を発見しましたimage-rendering: optimizeSpeed
。ただし、Chrome/Windows では気難しいようです。あまりにも多くの要素 (最初に試したコンテナとすべてのキャンバス) に設定すると、効果がありません。しかし、これをちょうど に適用するとcanvas
、98% の結果が得られます。
今私の問題は、ズームイン中に初めて描画することです。それは完全に機能し、他のすべての後続の描画アクションは実行中にぼやけ、その後正しい最近傍に戻ります(私のアプリは最初にスクラッチキャンバスに描画し、次に描画を実際のキャンバスに適用します)。Chrome がバイリニアの使用を主張するスクラッチ キャンバスには奇妙な点があります。掘り下げれば解決できると思います。
UPDATE2:image-rendering
Chrome/Windows ではうまく実装されておらず、少しバグがあるようです。値optimizeSpeed
とoptimizeQuality
が Chrome/Windows でサポートされていないことを確認できました。それらに画像レンダリングを設定すると、Chrome はその設定を無視します。Chrome/Windows は を認識しますが-webkit-optimize-contrast
、一貫して使用するとは限りません。Chrome は、バイリニア スケーリング アルゴリズムと思われるアルゴリズムと最近傍アルゴリズムの間をほぼランダムに切り替えます。Chrome に最近傍を常に使用させることができませんでした。
Windows で Chromium 17 のビルドを試してみましたが、同じように動作します。
Firefox (8.0.1) は非常に有望に見えますが、非常に優れているように見え-moz-crisp-edges
ます。当初、私はこのアプリの「理想的なブラウザ」として Chrome をターゲットにしていましたが、Firefox に切り替えるだけかもしれません。
最終的に、適切なサポートimage-rendering
が Chrome のパイプラインにあるようですが、まだ完全ではありません。WebKit 自体は、すべての画像レンダリング値を完全にサポートしていると主張していますが、Chrome が使用する WebKit のビルドは、この新しい修正に完全には更新されていないと思います。
delphi - SVGグラフィックをFireMonkeyアプリにロードするためにどのような道をたどりますか?
DelphiアプリケーションにSVGグラフィックスをロードできると私が考えることができる約4つの実装があります。
FMX.Canvas.VPRの作者であるMattiasAndersson によるものの1つは、FireMonkeyで動作しますが、彼はまだコードをリリースする準備ができていません。
2つ目はMartinWalterによるものでVCLで動作しますが、開発者はDelphiを終了しており、FireMonkeyに変換する予定はありません。
3つ目はAGGPASフレームワークの一部であり、VCLで機能しますが、FireMonkeyでは機能しません。
4つ目はJasonSouthwellによって開発中ですが、日付はまだ決まっていません。
だから私の質問:ホイールを5回(そしておそらくそれ以上)再発明しようとせずに、今日SVGコンポーネントが必要な場合はどのような道をたどるか?
css - タイル化可能な背景(background-repeat)にJPGまたはPNGを使用する必要がありますか?
このトピックに関するいくつかの質問を読みましたが、一般的なフィードバックとして、JPG
sは写真用であり、PNG
sはその他すべてのものであるというものがあります。
PNGは、次の場合に使用する必要があります。
- 透明度(1ビットまたはアルファ透明度)が必要です
- 可逆圧縮はうまく機能します(チャートやロゴ、コンピューター生成画像など)
JPEGは、次の場合に使用する必要があります。
- 可逆圧縮はうまく機能しません(写真など)
- フルカラーが必要です
GIFは次の場合に使用する必要があります。
- 非常に古いソフトウェアやブラウザなどでは、PNGは使用できません
- アニメーションが必要です
ただし、これらの議論は画像のダウンロードに向けられているようです。私の質問は、画像のレンダリングに向けられています。x方向とy方向の両方で背景を繰り返すことを計画しています...
...そして私は自分の画像をJPG
〜13Kまたは〜50Kとして保存することができますPNG
。そのため、ブラウザは、約40Kの違いにもかかわらず、この画像が比較的小さいため、かなり迅速にこの画像を取り込むことができます。しかし、ブラウザがページに画像をレンダリングする場合、特に背景が繰り返されるため、この違いは重要ですか?
asp.net-mvc-3 - ビューでの画像のレンダリング
強く型付けされたビューでユーザーに画像を表示しようとしています。モデルメンバーには、画像のコンテンツを表す画像があります(例:jpeg)。この画像をレンダリングするには、このコンテンツをimgタグに渡すにはどうすればよいですか?モデルは次のようになります:
ビューは次のようになります
親ビューから次のようにレンダリングします。
私はたくさん検索しましたが、いくつかのコントローラーのアクションの結果として画像を返す実装しか見つかりませんでした..ビューにfileContentResultを持つ画像を表示する方法はありますか?前もって感謝します。
ios - renderInContext: 角の半径と影を維持できますか?
角が丸いカスタム UILabel とドロップ シャドウがあります。これを実現するために、CALayer のプロパティを使用しています。次に、これを renderInContext: を使用して UIImage として保存しようとしています。丸い角は維持されますが、黒い背景が表示され、ドロップ シャドウがゆるくなります。
UILabel を画像としてレンダリングするが、影と丸みを帯びた角を維持することについて何か考えはありますか?
ラベルをレンダリングするために使用しているコードは次のとおりです。
macos - クロムのSVGバンディング
Google Chrome(20)で深刻なバンディングの問題に気付いたとき、svgファイルを使用して滑らかなグラデーションを作成しています。クロームをシネマディスプレイに移動すると、さらに奇妙なことに、バンディングが著しく減少し、これがさらに奇妙になります。以下は、私のmbpのネイティブ画面(左)とシネマディスプレイ(右)にまたがるWebサイトで撮影されたシングルスクリーングラブ(フォトショップなし)です。
ご覧のとおり、左側のバンディングははるかに深刻です。見知らぬ人はまだサファリFFまたはie9でほぼゼロのバンディングがあります。以下は同じ状況ですが、FFで
ドライバーの問題などのように感じます。でも本当に知りたいです。ここで一体何が起こっているのですか?画面間で表示が大きく異なるのはなぜですか?両方のモニターで1つの画面を取得すると、このようなバリエーションが生じる可能性はありますか?
また、FFウィンドウのPOSITIONによってレンダリングが変更されることに気づきました。ウィンドウの半分以上がネイティブディスプレイにある場合、シネマ側にはバンディングがありますが、ネイティブ側にはありません。ウィンドウの半分以上がシネマディスプレイに表示されるようにウィンドウを移動すると、バンディングショーはシネマ側で消え、ネイティブ側に表示されます。これはサファリにも当てはまりますが、クロムにはこの動作がなく、バンディングは常にネイティブ側でより目立ち、シネマ側ではあまり目立ちません。
これは本当に私を奇妙にしています。一体何がここで起こっているのですか?
c# - すでにビューにある画像バイトデータのレンダリング
私はMVC(オブジェクト指向のC#exeアプリから来ています)とStackoverflowを初めて使用します。私はMVCを使用してコードを効率的に実行しようと苦労してきました。データベースから返されるモデルデータがあり、そのデータとともにjpegイメージであるバイトのフィールドがあります。この段階で、データベースを1回呼び出しました...
今私が立ち往生しているのは、入力されたモデルデータがレンダリングされるビューに入ると、それを単純にループして各データ行に画像をレンダリングすることはできないということです。それを機能させるために私が見つけた唯一のことは、FileContentResultを返すActionメソッドを呼び出すことですが、これには、画像ごとにデータベースへの新しい呼び出しが必要です。
解決策として、次の問題を解決する3つの異なるアプローチを試しました。
- MVCがビューでFileContentResultを受信する方法を満たすために、Actionメソッドを介してバイト配列をコントローラーに戻すことができないようです。Actionメソッドは、単純な型のみを受け入れたいと考えています。
- 特に、モデルデータのエントリごとに数回のラウンドトリップが発生する場合は特に、ビューに既にあるバイトデータのデータベースに戻るようにコントローラーに要求したくありません。
- Data Uriの使用は機能しますが、まだ十分なブラウザーでサポートされていません。
誰かがこのような問題を処理するための最良の方法を教えてもらえますか?問題1または2で作業する必要がありますか、それとも私が見逃している別のアプローチがありますか?
FileContentResultをレンダリングできるように、バイト配列をコントローラーに戻すために問題1で最初に使用しようとしたコードを次に示します。
gwt - GWT で読み込んで描画する、フォーマットのない未加工の画像データ (非標準、データ配列のみ)
GWT で画像のレンダリングや処理を行った経験のある人はいますか?
GWT のクライアント側の画像レンダリングで行き詰まっています。表示する必要がある画像は非標準形式 (データ配列として想像してください) であるため、クライアント側で Image オブジェクトを作成してレンダリングすることはできません。私がやったことは、GWT (ImageData Class) で HTML5 要素を使用して各ピクセルの RGBA 値を設定することでした。これは非常に遅いです。レンダリング速度を改善する方法や、生の画像データをレンダリングするためのより良い方法があるのだろうか? クライアント側で画像を描画した後、私の次のステップは、リアルタイムで動作するためにも必要なピクセルレベルの操作を行うことです。
jquery - Heroku の Play フレームワーク、Jquery Ajax から画像をキャプチャしてレンダリングする方法
タイトルが示すように、データベースから画像を取得して、外部の Web ページに表示しようとしています。最終的には、これを PhoneGap で実行されるモバイル アプリケーションに使用したいと考えています。
(これはメンバークラス内にあります)
これまでのところ、私は ajax を使用して画像を受信しようとしています: (注、これは取得した 100 行の半分の行のようなものです)
�������"����� ��?����������
���������<br> �3�!1AQa"q�2��� B#$R�b34r��C%�S���cs5���&D�TdE£t6�U�e�u�F'������������� Vfv��������7GWgw����������5�!1AQaq"2����B#�R��3$b�r��CScs4�%���&5 ��D�T�dEU6te����u��F�����������Vfv������'7GWgw����������? ��^�[�'*��X���;+����#��u#Ѻ�zn���s���L�ʿ�m�Z%%�Z�P�n �W��&�6��}�G�� O�Q�k~1�y$\������ku���z�X�.�WSs�z��c}�f� ������J��L���'ncO��E��K�z��V%7\���0�c`��/�?����A^� ��v��k�&�^� i�s?ͳژM!+}Ula.~��˩w�g�؊�̻��Q��|���W��
とにかく、これをBase64に変換できる可能性はありますか? それとも、html ファイルのイメージ タグに配置するために使用できるものでさえありますか?
html - jsp でのイメージのレンダリングに関する問題
jsp 内で画像をレンダリングできません。他のすべては正常に機能しています。つまり、すべてのデータがレンダリングされています。問題を引き起こしているのはその唯一の画像です。そして、私はその道が正しいことを知っています
また
以下のコードはjspをレンダリングします
私はいくつかのアプローチを試みましたが、何も機能していないようです。jsp が jeditorPane にロードされ、そこからイメージが作成されます。
最大で、太陽と山を含む何らかの壊れた、またはレンダリングされていない画像を見ることができます...それが何であるかわかりません
誰かがこれで私を助けてくれますか?