Js-core: L'image a déformé le pensionnaire lorsqu'elle est utilisée dans<meta/> étiqueter

Créé le 21 oct. 2020 · 1Commentaire · Source: imgix/js-core

Décrivez le bogue
Une image mélangée et filigranée générée à l'aide de imgix-core-js est différente de l'image d'origine lorsqu'elle est enveloppée dans

balises et chargées comme aperçu.
l'image enveloppée a déformé les pensionnaires.

Reproduire
Étapes pour reproduire le comportement:

ceci est l'image générée par imgix: https://nate.imgix.net/nateLogo.png?q=1&auto=compress%2Cformat&w=600&bm=normal&bx=390&markx=180&markpad=0&markalign=left&blend64=aHR0cHM6Ly9uYXRlLmltZ2l4Lm5ldC9wcm9kLzVmNWY5ZTNjY2FhYzIwMDAzODExM2MwOS81Zjc2ZDJiNmFkZjI5OTAwMzgwNjJjMDcuanBnP2ZpdD1jcm9wJmg9MzE1Jnc9MjEwJml4bGliPWpzLTIuMy4xJnM9Mzg1M2E5MGFhOWE2MzRhZDg1MTdmYjNkMTllMmQ3ZGY&mark64=aHR0cHM6Ly9uYXRlLmltZ2l4Lm5ldC9wcm9kLzVmNWY5ZTNjY2FhYzIwMDAzODExM2MwOS81Zjc2ZDA1NmU4NDI2MjAwMzg4MGU1ZTgucG5nP2ZpdD1jcm9wJmg9MzE1Jnc9MjEwJml4bGliPWpzLTIuMy4xJnM9N2UzMWM2ZmQyODMyODExMDE1YzY4NzUxMmEyNTdmOGM&ixlib=js-2.3. 1 & s = 9d3826f9ca00ae169bebc220d2f4e259
envelopper le lien ci-dessus comme ça
<meta property="og:image" content="https://nate.imgix.net/nateLogo.png?q=1&auto=compress,format&w=600&bm=normal&bx=390&markx=180&markpad=0&markalign=left&blend64=aHR0cHM6Ly9uYXRlLmltZ2l4Lm5ldC9wcm9kLzVmNWY5ZTNjY2FhYzIwMDAzODExM2MwOS81Zjc2ZDJiNmFkZjI5OTAwMzgwNjJjMDcuanBnP2ZpdD1jcm9wJmg9MzE1Jnc9MjEwJml4bGliPWpzLTIuMy4xJnM9Mzg1M2E5MGFhOWE2MzRhZDg1MTdmYjNkMTllMmQ3ZGY&mark64=aHR0cHM6Ly9uYXRlLmltZ2l4Lm5ldC9wcm9kLzVmNWY5ZTNjY2FhYzIwMDAzODExM2MwOS81Zjc2ZDA1NmU4NDI2MjAwMzg4MGU1ZTgucG5nP2ZpdD1jcm9wJmg9MzE1Jnc9MjEwJml4bGliPWpzLTIuMy4xJnM9N2UzMWM2ZmQyODMyODExMDE1YzY4NzUxMmEyNTdmOGM&ixlib=js-2.3.1&s=9d3826f9ca00ae169bebc220d2f4e259">

et partagez-le dans des applications (par exemple, WhatsApp, imessage) qui a la capacité de prévisualiser, l'aperçu montre un pensionnaire déformé.
Comportement attendu
Une description claire et concise de ce à quoi vous vous attendiez.
l'aperçu doit être le même que l'image d'origine
Captures d'écran
Le cas échéant, ajoutez des captures d'écran pour expliquer votre problème.
Aperçu avec des pensionnaires déformés

Image originale

Autres exemples:
Screen Shot 2020-10-02 at 8 57 49 AM
IMG_B17400BFF561-1

Information:

version imgix-core-js: [par exemple 2.3.1]

bug

Source

ChelseaRong

👍7

>Tous les commentaires

@ChelseaRong Il s'avère que l'artefact est causé par le paramètre q défini à une valeur très faible ( q=1 ). Détail complet de ce qui se passe:

Le paramètre q=1&auto=compress est appliqué, ce qui rend la version de la plus basse qualité de l'image
- Étant donné que la qualité est si faible, la version compressée et rendue de l'image finit par avoir des artefacts (une grande ligne floue dans ce cas)
Le paramètre auto=format provoque l'affichage de ce problème uniquement dans certains navigateurs / robots d'exploration
- Étant donné que les scrapers sociaux n'ont pas d'agent utilisateur détecté prenant en charge WebP, nous servons la version .jpg qui se compresse avec une qualité bien inférieure à celle de WebP
- C'est aussi pourquoi nous ne voyons pas le problème dans un navigateur prenant en charge WebP (comme Chrome ou Firefox)

Pour résoudre ce problème, je vous recommande de définir le paramètre q sur au moins 25 .

Je vais fermer ce problème car il ne s'agit pas d'un bogue imgix-core-js , mais si vous avez besoin d'un débogage supplémentaire pour l'API de rendu imgix, contactez [email protected].