画像自体を囲む白い (または黒い) 境界線を持つ画像の大規模なセットにいくつかの画像があります。どうやって...

1. 上記の背景/境界線のないサイズに画像をトリミングします
2. 画像のサイズを変更して、指定された出力サイズを中央揃えで埋めます。

たとえば、サイズが 1280x1024px のアップロードされた画像があり、これには白 (または黒) の境界線があり、内側のサイズは 800x700 (中央に配置されていない可能性があります) です。その境界線を切り取ってから、サイズを変更して640x480 出力。これにより、内部の画像が効果的に取得され、640x480 が塗りつぶされ、元の画像からさらに 100 ピクセルの高さが効果的にトリミングされます。

グラフィックマジックを備えたバッチ/シェルスクリプトにすることができるものを好みますが、phantomjs を介したソリューションも受け入れます。可能であれば、追加のツール/言語は避けたいと思います。

Picturefill 2.1 を利用可能な遅延読み込みプラグインと組み合わせようとしていますが、まだ成功していません。Google で見つけたコードのほとんどは、Picturefill 1 用です。

ここにいる誰かが以前にこれを行ったことがあり、私を助けることができますか? Picturefill は正常に動作しています。問題は、画像の幅と高さがなく、すべての画像が一度に読み込まれるため、遅延読み込み部分です。

キャンバス ポインタ エラーが発生しました。目的の場所 (マウスの位置) にターゲットが表示されます。

http://jsfiddle.net/conmute/rk276q3g/

問題は Firefox のレンダリングにあります (マウスを非常に速く動かす):

http://jsfiddle.net/conmute/rk276q3g/1/

四角形の動作がおかしいので、うまくいきません。誰でも正確に何を指摘できますか？

ステータスアップデート

この問題を修正しました: http://jsfiddle.net/rk276q3g/2/

ctx.save() と .restore() をコメントアウトし、四角形を描画する前に矢印イメージを配置します。

実際に私はこの問題を修正しましたが、問題は...

質問の更新

... ctx.translate(... といくつかの描画を行った後に描画する必要がある場合はどうすればよいですか?

ctx.save() および .restore() メソッドを使用する必要がありますが、問題が発生します。コメントせずにこの作業を行うにはどうすればよいですか? それらを削除すると、問題が解決します。

それらがどのように機能するかを正しく理解していると思っていましたが、そうではないようです。

アップデート

ctx.restore()すべてを削除して解決したようですが、前の位置を計算して戻ったctx.save()後に描画するパーツを追加すると、問題が再び発生します。translate

参照してください: http://jsfiddle.net/rk276q3g/5/

達成したい単純なタスクが 1 つあります。
可変幅のコンテナに画像があります。
コンテナーの幅は、300、400、700、または 900 ピクセルにすることができます。これは、メディア クエリによって行われます。イメージは、そのコンテナーの幅全体を占有する必要があります。したがって、幅も 300、400、700、または 900 ピクセルになります。画像には、そのすべての幅の値に対して異なるソースが必要です。そのため、携帯電話で小さな画像を提供できます。

これは、おそらく属性の助けを借りてsrcset、要素の属性で実行できると思いました。幅はこんな感じimgsizes

しかし、ブラウザは画像自体の幅ではなく、ディスプレイポートの幅に比例して画像を選択するため、そのようには機能しません。http://scottjehl.github.io/picturefill/
のピクチャーフィル ポリフィルを使用した例: http://codepen.io/HerrSerker/pen/itBJy。次のサイズの 1 つの画像を取得するため、これは機能しません。

もちろん、それを考慮して、srcsetをこれに変更することもできます

これはデスクトップでは機能しますが、Retina ディスプレイでは失敗します。これは、ここではデバイスのピクセル比が考慮されるためですが、メディア クエリとは異なる方法で行われます。また、画像はビューポートの幅と同じ幅をコンパイル時に知っている必要があるため、役に立ちませんか? とんでもない。イメージ グリッド システムでイメージを使用します。デスクトップ デバイスの 3 列グリッドとスマートフォンの 1 列グリッドでは、画像の幅が異なります。幅とビューポート幅の比率を計算するのは、画像の責任ではありません。

sizes私は属性にも運がありませんでした（ここに例はありません）。理由は上記と同じです。サイズ属性では、メディアクエリに従って画像を広くする必要があるビューポート幅の量を指定します。これはとてもオフです。画像はどのように知る必要がありますか？

だから私はこの解決策を考え出しました。data-srcsetsrcset 属性自体と同じ構文で属性をセットアップしますが、カスタム JavaScript プログラミングを使用します。例: http://codepen.io/HerrSerker/pen/tCqJI

これは機能しますが、気分が悪いです。しかし、そうではないかもしれません。仕様では、レスポンシブ イメージがまさにそのように動作すると述べているためです。しかし、それは間違った方法だと感じています。レスポンシブ イメージのユース ケースの 90% は、この仕様では機能しません。

だから私は間違っていますか？定義された方法で srcset を使用しませんでしたか? 仕様を間違って理解しましたか? そして、W3C とレスポンシブ イメージ コミュニティ グループは、現実とはかけ離れた考え方をしているのでしょうか?

12 列のレイアウトのサイトがあり、デザインに合わせて srcset 属性と size 属性を正しく使用する方法を見つけようとしています。

デスクトップでは 3 列にまたがるサイドボックスがありますが、タブレットとモバイルのサイズでは 12 列 (100% 幅) になります。

私が欲しいのは、デスクトップ バージョンで使用される画像、モバイルでも使用される (最大幅 480px)、および特定のタブレット サイズの画像が 481px から 781px の間のすべてで使用されることです。

これは私のコードです:

私の例では、780px までは常に 768 バージョンが使用され、その後はデフォルトの src が使用されます。しかし、320 バージョンを 480px まで使用するにはどうすればよいですか?

Picturefill ポリフィルに関する初心者向けの質問:

src属性を使用すると、Firefox (33) と Safari (7.1) で短いちらつきが発生することに気付きました。これらのブラウザは、追加の HTTP リクエストを作成します。これは私のコードです：

• Picturefill はブラウザが不要な画像をダウンロードするのを防ぐべきではありませんか?
• src属性を削除することによるマイナス面はありますか? (JS がオフになっているか、ネイティブのレスポンシブ画像のないブラウザーを使用している人は、画像がまったく表示されず、代替テキストのみが表示されることを認識しています)
• src欠落している属性は SEO にどのような影響を与えますか?

サポートされていないブラウザー用のピクチャーフィルポリフィルを使用して、レスポンシブ画像用の要素を使用しています。サポートされていないブラウザでもすべて正常に動作します。しかし、それがサポートされているクロムでは、私のjqueryロードイベントは一貫して発火していません。私のコードは次のとおりです。

そして私の絵の要素：

クロムで正しく動作させるために何ができるかについて何か考えはありますか?

修理済み

取引が何であるかはよくわかりませんが、負荷リスナーの下に追加すると修正されました。setTimeout が 0 の場合でも機能しましたが、保存するために 10ms を指定しました。小さなタイムアウトがクロムの問題を解決する前に、いくつかのシナリオを経験しました。