web-dev-qa-db-fra.com

Image JPEG avec canal alpha sur le site Web

Je souhaite créer un fichier image JPEG avec des pixels partiellement transparents ou totalement transparents, semblables à un fichier PNG avec un canal alpha. Est-ce possible? Si oui, comment pourrais-je m'y prendre?

Je voudrais utiliser l'image sur un site web. Si j'essaie de le faire, cela fonctionnerait-il dans un ou tous les navigateurs populaires (IE 7+, Firefox, Safari)? En supposant que ce soit possible, cela fonctionnera-t-il ou y at-il des astuces ou des astuces nécessaires pour que cela fonctionne?

EDIT: Certaines réponses disent que je ne peux pas faire ça. Cependant, j'ai trouvé cette page décrivant une image JPEG avec transparence. Est-ce que quelqu'un sait s'il existe un moyen pratique de produire des fichiers dans ce format? Est-ce largement supporté?

transparencyjpegopacityalpha
22
Elias Zamaria

Oui, vous pouvez le faire. Le Format JPEG prévoit un format de fichier image échangeable

  • Définition de l'espace colorimétrique
  • Enregistrement de sous-échantillonnage de composants
  • Définition du format des pixels

JPEG/Exif est le plus courant pour la photographie et JPEG/JFIF est le plus couramment utilisé pour le stockage.

Lorsque les autres pays indiquent que le format JPEG ne fournit pas de canal alpha, ils affirment en réalité qu’il n’existe pas de formats largement utilisés pour l’encodage JPEG comportant un canal alpha.

Jetez un oeil sur Lors de l'ajout de canaux alpha à des images JPEG , où l'auteur décrit et fournit une solution à ce que vous essayez de faire et utilise l'élément de la toile pour le rendu dans un navigateur.

32
martin

JPEG ne supporte pas la transparence. Vous devrez vous en tenir au format PNG ou GIF. Pourquoi voulez-vous utiliser un fichier JPEG pour la transparence?

Mettre à jour

Ne tenez pas compte de cette réponse, elle a été écrite lorsque le support Canvas était insuffisant. Reportez-vous plutôt à la réponse de Martin.

10
DavGarcia

Vous pouvez également utiliser SVG pour associer un fichier JPG à un canal alpha, comme indiqué ci-dessous ici . Vous devrez insérer votre SVG dans le code HTML, sinon cela ne fonctionnera pas dans tous les navigateurs. .____.] En outre, IE8 n'est pas pris en charge.

Le code en ligne svg ressemblera à ceci:

<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

Vous ne pouvez avoir aucune sorte de transparence avec une image JPEG : JPEG ne prend pas cela en charge.

Vous devrez passer à PNG images, pour obtenir 1 ou 8 bits de transparence (ou GIF , qui ne prend en charge que 1 bit - ie transparent, ou non transparent)} _

3
Pascal MARTIN

Le format JPEG d'origine ne fournit pas de canal alpha. Vous pouvez cependant créer un fichier PNG. Cela fonctionnera dans IE7 + et d'autres navigateurs "modernes".

Le format "JPEG 2000" est supporte la transparence, mais malgré son nom, il s’agit vraiment d’un tout nouveau format de codage. Il est uniquement pris en charge par Safari.

1
Pointy

Je cherche toujours la même solution.

À moins que les navigateurs ne nous fournissent un support pour canal alpha ou un nouveau format d'image il n'y aura que des solutions de contournement.

Utiliser un JPEG pour une image et un png pour un masque réduirait considérablement la taille, mais augmenterait le nombre de fichiers (2 IMAGE + ALPHA au lieu de 1 IMAGE avec ALPHA).

Si vous souhaitez améliorer la vitesse de chargement des navigateurs et réduire leur taille, vous devez trouver une solution avec une seule demande de navigateur (1 fichier image).

Toute solution que j'ai trouvée est un prototype. Mais vous devriez vérifier ceci:

Masques CSS3 http://www.webkit.org/blog/181/css-masks/

Et une combinaison de deux fichiers http://blog.jackadam.net/2010/alpha-jpegs/

1
Heroselohim

Il est prévu que JPEG XL prenne en charge la transparence. De Projet d’appel à propositions sur le codage d’image de nouvelle génération (JPEG XL) :

1.2 Portée

L’activité de codage d’image de nouvelle génération a pour objectif de développer une norme de codage d’image Offrant:
...

  • Fonctionnalités pour les applications Web, telles que la prise en charge du codage par canal alpha et des séquences d'images animées.

...

4.2 Besoins en flux binaire compressé

Les soumissions doivent au moins couvrir les exigences de base et sont encouragées à couvrir également les exigences souhaitables.

Exigences de base

...

Prise en charge du codage canal alpha/transparence

0
Mike