web-dev-qa-db-ja.com

Webサイト上のアルファチャネル付きのJPEG画像

アルファチャネルを含むPNGファイルのように、部分的に透明または完全に透明ないくつかのピクセルを含むJPEGイメージファイルを作成します。これは可能ですか？もしそうなら、私はこれをどうやってやりますか？

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

編集：一部の返信では、これを行うことはできません。しかし、私は このページ が透明なJPEG画像について記述していることを発見しました。この形式でファイルを作成する便利な方法があるかどうか誰かが知っていますか？広くサポートされていますか？

transparencyjpegopacityalpha
26
Elias Zamaria

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

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

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

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

JPEG画像にアルファチャネルを追加する場合 をご覧ください。ここでは、作者が正確に何をしようとしているのかを説明し、解決策を提供し、canvas要素を使用してブラウザーにレンダリングします。

34
martin

JPEGは透明度をサポートしていません。 PNGまたはGIFを使用する必要があります。なぜ透過にJPEGを使用するのですか？

更新

この回答は無視してください。Canvasサポートがまばらだったときに書き直されました。代わりにmartinの回答を参照してください。

10
DavGarcia

こちら で概説されているように、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"></image>
    </mask>
  </defs>
  <image mask="url(#canTopMask)" id="canTop" width="560" height="1388" xlink:href="can-top.jpg"></image>
</svg>
6
silviot

[〜＃〜] jpeg [〜＃〜] 画像を使用して透明度を設定することはできません。JPEGではサポートされていません。

- [〜＃〜] png [〜＃〜] imagesに切り替えて、1ビットまたは8ビットの透明度（または [〜＃〜] gif [〜＃〜] 、これは1ビットのみをサポートします-つまり透明かどうか-トランスペアレント）。

-to WebPに切り替えることもできます。これは [〜＃〜] jpeg [〜＃〜] と同様のメカニズムを備えています。非可逆/可逆圧縮、透明度、アニメーションをサポートしています。

3
Pascal MARTIN

元のJPEG形式は、アルファチャネルを提供していません。ただし、PNGファイルを作成できます。 IE7 +やその他の「モダン」ブラウザで動作します。

「JPEG 2000」形式doesは透明度をサポートしますが、その名前にもかかわらず、それは本当にまったく新しい画像エンコーディング形式です。 Safariでのみサポートされています。

1
Pointy

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

ブラウザがalphaチャネルまたは新しい画像形式のサポートを提供しない限り回避策のみになります。

画像にjpegを使用し、マスクにpngを使用すると、サイズは大幅に縮小されますが、ファイル数は増加します（ALPHAを使用した1つの画像ではなく2つの画像+アルファ）。

ブラウザーの読み込み速度を向上させてサイズを小さくしたい場合は、ブラウザー要求を1つだけ（1つの画像ファイル）解決策を見つける必要があります。

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

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

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

1
Heroselohim

JPEG XLが透明化をサポートする計画があります。 From 次世代イメージコーディング（JPEG XL）に関する提案のドラフトコール ：

1.2範囲

次世代の画像コーディング活動は、以下を提供する画像コーディング標準の開発を目的としています。
...

  • アルファチャネルコーディングやアニメーション画像シーケンスのサポートなど、Webアプリケーションの機能。

...

4.2圧縮ビットストリームの要件

提出物は、少なくとも中核的な要件をカバーしなければならず、望ましい要件もカバーすることが推奨されます。

コア要件

...

アルファチャネル/透過性コーディングのサポート

0
Mike