27

アルファ チャネルを持つ PNG ファイルと同様に、部分的に透明または完全に透明なピクセルを含む JPEG イメージ ファイルを作成したいと考えています。これは可能ですか？もしそうなら、どうすればこれを行うことができますか？

画像をウェブサイトに使用したい。これを実行しようとすると、一般的なブラウザ (IE 7 以降、Firefox、Safari) の一部またはすべてで動作しますか? それが可能であると仮定すると、それはうまくいくでしょうか、またはそれを機能させるために必要なトリックやハックはありますか?

編集: 一部の返信では、これはできないと言っています。しかし、透明度のある JPEG 画像について説明しているこのページを見つけました。この形式でファイルを生成する便利な方法があるかどうかは誰にもわかりませんか? 広く支持されていますか？

4

9 に答える 9

37

はい、できます。JPEG 形式は、交換可能な画像ファイル形式を提供します。

  • 色空間の定義
  • コンポーネントのサブサンプリング登録
  • ピクセル縦横比の定義

JPEG/Exif は写真に最も一般的で、JPEG/JFIF はストレージに最も一般的に使用されます。

他の人が JPEG 形式はアルファ チャネルを提供しないと述べている場合、彼らが実際に言っているのは、アルファ チャネルを含む JPEG エンコーディングに広く使用されている形式が存在しないということだけです。

On added alpha channels to JPEG images を見てください。著者は、あなたがやろうとしていることを正確に説明して解決策を提供し、キャンバス要素を使用してブラウザーにレンダリングします。

于 2012-04-02T02:10:39.970 に答える
12

JPEG は透明度をサポートしていません。PNG または GIF に固執する必要があります。透過に JPEG を使用する理由は何ですか?

アップデート

この回答は無視してください。キャンバスのサポートがまばらだったときに書き戻されました。代わりにマーティンの答えを参照してください。

于 2010-04-14T18:13:19.070 に答える
7

こちら で説明されているように、SVG を使用して JPG とアルファ チャネルを組み合わせることもできます。SVG を HTML にインライン化する必要があります。そうしないと、すべてのブラウザーで機能しません。また、IE8には対応していません。

svg インライン コードは次のようになります。

<svg preserveAspectRatio="xMinYMin" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 560 1388">
  <defs>
    <mask id="canTopMask">
      <image width="560" height="1388" xlink:href="img/can-top-alpha.png" />
    </mask>
  </defs>
  <image mask="url(#canTopMask)" id="canTop" width="560" height="1388" xlink:href="can-top.jpg" />
</svg>
于 2015-01-29T15:12:26.503 に答える
5

JPEG画像ではいかなる種類の透過性も持つことができません: JPEG はそれをサポートしていません。

PNG画像に切り替えて、1ビットまたは 8 ビットの透明度を取得できます(または、1 ビットのみをサポートするGIF -- つまり、透明または非透明)を取得できます。

JPEGと同様のメカニズムを持つWebPに切り替えることもできます。非可逆/可逆圧縮、透明度、アニメーションをサポートしています。

于 2010-04-14T18:14:17.943 に答える
4

元の JPEG 形式は、アルファ チャネルを提供しません。ただし、PNG ファイルを作成することはできます。IE7+ およびその他の「最新の」ブラウザで動作します。

「JPEG 2000」形式は透過性をサポートしていますが、その名前とは裏腹に、まったく新しい画像エンコード形式です。Safari でのみサポートされています。

于 2010-04-14T18:13:35.853 に答える
1

私はまだ同じ解決策を探しています。

ブラウザがアルファ チャネルまたは新しい画像形式をサポートしない限り、回避策しかありません。

画像に jpeg を使用し、マスクに png を使用すると、サイズが大幅に縮小されますが、ファイル数が増加します (1 つの画像とアルファの代わりに 2 つの画像とアルファ)。

ブラウザーの読み込み速度を向上させてサイズを小さくしたい場合は、ブラウザーの要求が 1 つ (1 つの画像ファイル) だけのソリューションを見つける必要があります。

私が見つけた解決策はすべてプロトタイプです。ただし、これを確認する必要があります。

CSS3 マスク http://www.webkit.org/blog/181/css-masks/

そして、2 つのファイルの組み合わせ http://blog.jackadam.net/2010/alpha-jpegs/

于 2012-07-10T14:52:51.277 に答える
-2

フィナンシャル タイムズのロゴを見てください。どうやら jpeg ですが、アルファ チャンネルがあります: http://im.media.ft.com/m/img/masthead_main.jpg

ただし、Photoshop で画像を開くことはできません。

于 2012-08-07T21:56:00.633 に答える
-2

信じられないほど自信に満ちた誤報がここにあるのはなぜですか? わからない場合は、コメントしないでください。JPEG は透過性を完全にサポートします。透過性はコンポーネント/チャネルであり、JPEG は何千ものチャネルをサポートできます。JPEG は色盲であり、JFIF または SPIFF ラッパーがなければ、赤、緑、青のチャネル、または YCbCr チャネルについても認識しません。JPEG が 8 ビットだけでなく 12 ビット チャネルをサポートできるように、ブラウザがデータの処理方法を知っているわけではありません。問題は、特定のブラウザーが、レンダリング中にチャネルを「透過性」を意味するものとしてデコードし、適切に解釈できるかどうかです。

于 2017-10-12T12:17:56.423 に答える