我想制作一个 JPEG 图像文件，其中包含一些部分透明或完全透明的像素，类似于具有 alpha 通道的 PNG 文件。这可能吗？如果是这样，我将如何去做？
我想在网站上使用图像。如果我尝试这样做，它是否适用于任何或所有流行的浏览器（IE 7+、Firefox、Safari）？假设它是可能的，它会起作用吗，还是需要任何技巧或黑客才能使其起作用？
编辑：一些回复说我不能这样做。但是，我发现此页面描述了具有透明度的 JPEG 图像。有谁知道是否有一种方便的方法来生成这种格式的文件？是否得到广泛支持？
问问题
50753 次
9 回答
37
是的，你可以这样做。JPEG 格式提供可交换的图像文件格式
- 色彩空间定义
- 组件子采样注册
- 像素纵横比定义
JPEG/Exif 最常用于摄影，JPEG/JFIF 最常用于存储。
当其他人声明 JPEG 格式不提供 alpha 通道时，他们真正的意思是没有广泛使用的包含 alpha 通道的 JPEG 编码格式。
看看On added alpha channels to JPEG images，作者在其中描述并提供了一个解决方案来准确说明您正在尝试做什么，并使用 canvas 元素在浏览器上呈现。
于 2012-04-02T02:10:39.970 回答
12
JPEG 不支持透明度。您需要坚持使用 PNG 或 GIF。为什么要使用 JPEG 来实现透明度？
更新
请忽略这个答案，它是在 Canvas 支持稀疏时写回的。请参阅马丁的回答。
于 2010-04-14T18:13:19.070 回答
7
You can also use SVG to combine a JPG with an alpha channel, as outlined here. You'll need to inline your SVG in the HTML, or it won't work in all browsers. Also, IE8 is not supported.
The svg inline code will look like:
<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 回答
4
原始 JPEG 格式不提供 Alpha 通道。但是，您可以制作 PNG 文件。它适用于 IE7+ 和其他“现代”浏览器。
“JPEG 2000”格式确实支持透明度，但尽管名称如此，它实际上是一种全新的图像编码格式。它仅受 Safari 支持。
于 2010-04-14T18:13:35.853 回答
1
我仍在寻找相同的解决方案。
除非浏览器支持alpha 通道或新的图像格式，否则只有解决方法。
使用 jpeg 作为图像，使用 png 作为掩码会大大减小大小，但会增加文件数（2 IMAGE+ALPHA 而不是 1 IMAGE 和 ALPHA）。
如果您想提高浏览器的加载速度并减小大小，您应该找到只有一个浏览器请求（1 个图像文件）的解决方案。
我发现的任何解决方案都是原型。但是你应该检查这个：
于 2012-07-10T14:52:51.277 回答
0
JPEG XL 计划支持透明度。来自 下一代图像编码 (JPEG XL) 提案征集：
1.2 范围
下一代图像编码活动旨在开发一种图像编码标准，该标准提供：
...
- Web 应用程序的功能，例如支持 Alpha 通道编码和动画图像序列。
...
4.2 压缩比特流要求
提交的内容应至少涵盖核心要求，并鼓励也涵盖理想的要求。
核心要求
...
支持 Alpha 通道/透明度编码
于 2018-01-19T09:46:43.620 回答
-2
看看金融时报的标志。它显然是一个 jpeg，但有一个 alpha 通道：http: //im.media.ft.com/m/img/masthead_main.jpg
虽然我无法用 Photoshop 打开图像。
于 2012-08-07T21:56:00.633 回答
-2
这里有多少令人难以置信的错误信息？如果您不知道，请不要发表评论。JPEG 绝对支持透明度——透明度是一个组件/通道，JPEG 可以支持数千个通道。JPEG 是色盲的，它甚至不知道红色、绿色和蓝色通道或 YCbCr 通道，没有 JFIF 或 SPIFF 包装器。正如 JPEG 可以支持 12 位通道，而不仅仅是 8 位 - 并不意味着浏览器知道如何处理数据。问题是给定的浏览器是否可以在渲染过程中解码并正确地将通道解释为意味着“透明度”。
于 2017-10-12T12:17:56.423 回答