带有alpha通道的JPEG图像在网站上

Question

我想制作一个JPEG图像文件,其中包含一些部分透明或完全透明的像素,类似于带有alpha通道的PNG文件.这可能吗？如果是这样,我该怎么做呢？

我想在网站上使用该图像.如果我尝试这样做,它会在任何或所有流行的浏览器(IE 7 +,Firefox,Safari)中工作吗？假设它是可能的,它会起作用,还是需要任何技巧或黑客来使其工作？

编辑:一些回复说我不能这样做.但是,我发现此页面描述了具有透明度的JPEG图像.有谁知道是否有一种方便的方式来生成这种格式的文件？它得到广泛支持吗？

Answer 1

是的,你可以这样做.在JPEG格式规定了可交换图像文件格式

• 色彩空间定义
• 组件子采样注册
• 像素宽高比定义

JPEG/Exif是最常用的摄影,JPEG/JFIF是最常用的存储.

当其他状态JPEG格式不提供alpha通道时,他们真正说的是没有广泛使用的JPEG编码格式包括alpha通道.

看看在向JPEG图像添加Alpha通道时,作者描述并提供了一个解决方案,准确地说明了您要执行的操作,并使用canvas元素在浏览器上进行渲染.

Answer 2

JPEG不支持透明度.你需要坚持使用PNG或GIF.为什么要使用JPEG来提高透明度？

更新

请忽略这个答案,当Canvas支持稀疏时,它会被回写.请转而谈谈马丁的回答.

Answer 3

您也可以使用SVG至JPG带有alpha通道相结合,所概述这里.您需要在HTML中内联SVG,否则它将无法在所有浏览器中使用.此外,不支持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>

Answer 4

原始 JPEG 格式不提供 Alpha 通道。不过，您可以制作 PNG 文件。它将在 IE7+ 和其他“现代”浏览器中运行。

“JPEG 2000”格式确实支持透明度，但尽管有这个名称，它实际上是一种全新的图像编码格式。仅 Safari 支持。

Answer 5

JPEG图像不能具有任何类型的透明度：JPEG 不支持。

您可以切换到PNG图像，以获得1 位或 8 位透明度（或GIF，仅支持 1 位——即透明或不透明）。

您还可以切换到具有与JPEG类似机制的WebP。它支持有损/无损压缩、透明度和动画。