Étiquette : Web

Vincent Lecomte
[Dossier] Le format WebP sur WordPress

[Dossier] Le format WebP sur WordPress

Suite à la lecture d’un article du site Cachem, je suis passé au format d’images WebP sur mes deux blogs WordPress. Ce format existe depuis 2010 et est désormais plutôt bien supporté par les navigateurs récents. Quant à Internet Explorer, il est tout simplement incapable d’afficher ces images. L’un des avantages du WebP est qu’on réduit significativement la taille des images, ce qui permet de les charger plus rapidement.

Pour effectuer une transition sans accroc je suis passé par l’extension WebP Express. Celle-ci est très complète et permet notamment de décider quel format d’image afficher en fonction du navigateur. Elle convertit également les images lors de l’upload. Cependant, sa prise en main n’est pas forcément aisée, déjà parce qu’elle n’est pas traduite en français, mais aussi parce qu’elle propose énormément de paramètres.

Réglages

Depuis l’administration de WordPress, rendez vous dans Réglages puis WebP Express.

Mode de fonctionnement

Dans mon cas, j’ai choisi la méthode « Varied image responses » qui me permettra de fournir la bonne image en fonction du navigateur. Comme je n’utilise pas de CDN, et comme je n’ai pas voulu me prendre la tête avec trop d’options à configurer, c’est ce qui semblait être le meilleur choix.

Général

Depuis cette catégorie, il faudra tout d’abord indiquer la portée (paramètre Scope). L’extension peut gérer les thèmes. Dans mon cas j’ai préféré m’en tenir aux images Le seque j’envoie via la médiathèque de WordPress (paramètre « Uploads only« ).

Le second paramètre à définir concerne les types de fichiers sur lesquels l’extension doit travailler. Autant voir grand et choisir à la fois PNG et JPG.

Ensuite il faut déterminer où les images seront stockées. Le mode « Mingled » indique que les images se trouvent dans le même dossier, côte-à-côte. Le paramètre suivant, « File extension« , indique si on utilise le nom du fichier suffixé par « .webp » ou s’il faut utiliser le nom complet et l’extension originale en y rajoutant « .webp ». Par facilité j’ai choisi « Set to .webp » pour avoir des noms d’image parfaitement identiques.

Enfin les options suivantes importent peu. Je les ai donc laissées par défaut. Je n’ai pas défini la politique de cache (celle-ci est gérée par une autre extension sur mon blog).

Règles du fichier .htaccess

L’extension vous propose d’activer les deux premiers modes, mais dans le cas où il resterait des images non converties sur votre blog, la première suffira (à savoir « Enable direct redirection to existing converted images« ).

Si vous n’avez pas l’extension Apache mod_header activée sur votre hébergement, cela pourrait ne pas fonctionner correctement.

Conversion

L’extension propose des paramètres pour gérer la qualité de la conversion des images. Il est même possible de modifier l’ordre des méthodes de conversion en fonction de ce qui est disponible sur votre hébergement.

Dans mon cas j’ai également coché la case « Convert on upload » pour activer la conversion à partir de l’outil d’upload de WordPress. Attention que cela a un impact sur les performances d’envoi, en fonction des miniatures à générer.

Altérer le code HTML

La dernière option permet de modifier le contenu de la page pour l’affichage des images en WebP. L’auteur recommande d’activer l’option en plus de la redirection via .htaccess.

Pour maximiser la compatibilité avec de vieux navigateurs, j’ai coché l’option « Replace image URLs » ainsi que « Only do the replacements in webp enabled browsers« .

Le dernier paramètre modifie le comportement de l’extension lors de la modification du code. La première option, « Use content filtering hooks« , est recommandée d’après la bulle d’aide affichée.

Conclusion

L’extension offre de multiples possibilités pour convertir et gérer vos images au format WebP pour votre site WordPress. Si vous avez des commentaires ou si vous connaissez bien WebP Express, n’hésitez pas à donner vos astuces de configuration pour en améliorer le comportement.

[Info] Changement d’hébergeur

[Info] Changement d’hébergeur

Bien que cela ait été plutôt transparent, vous apprendrez que j’en ai profité pour déménager mes blogs chez o2switch. Après de nombreuses recherches, cet hébergeur français m’avait tapé dans l’œil. Son offre unique est plutôt intéressante : il s’agit d’un « tout illimité » proposé à 5 euros / mois, avec domaine inclus.

Changement hébergeur

Si j’ai changé, c’est parce que les offres d’hébergement mutualisé chez Online.net ont été remplacées par les offres Cloud. Malheureusement, vu le prix de celles-ci, cela ne me correspondait plus. De plus, Scaleway a tout simplement décidé de ne plus apporter d’évolution à son offre mutualisée désormais considérée comme historique. C’est suite à une question à propos de PHP posée sur Twitter que j’ai compris qu’il était temps de trouver autre chose.

En tout cas jusqu’à présent le support a très bien répondu à mes premières questions, et quand je vois tout ce qui est proposé au niveau de la personnalisation (options PHP, choix des extensions actives,…) ou des outils (gestion via cPanel, fonctionnalités de sécurité, accès SSH, sauvegardes automatiques,…) je ne pense pas m’être trompé. Seul le temps nous le dira.

[Astuces] Réaliser une capture d’écran avec Firefox

[Astuces] Réaliser une capture d’écran avec Firefox

Il n’est jamais trop tard pour apprendre de nouvelles astuces, et la preuve, c’est qu’aujourd’hui j’ai découvert que Mozilla Firefox intégrait un outil permettant de réaliser une capture d’écran. Et vous savez la meilleure? Cet outil existe depuis la version 78 du navigateur. J’arrive un peu tard pour faire croire à une exclusivité.

réaliser capture d'écran Firefox

Pour accéder à cette fonctionnalité, il vous suffit d’effectuer un clic droit dans une zone de la page puis de choisir l’entrée « Effectuer une capture d’écran » dans le menu contextuel.

réaliser capture d'écran Firefox: menu contextuel

Il existe aussi un raccourci clavier : Ctrl + MAJ + S.

La page s’assombrit alors et l’outil vous propose de sélectionner une image, un élément de la page, ou bien de réaliser vous-même le tracé de la zone que vous souhaitez capturer. Lors de la sélection, le défilement sera automatique, ce qui signifie que vous pouvez réaliser une capture d’écran aussi haute que vous le désirez.

Deux autres options s’offrent à vous : capturer la page complète ou capturer la zone visible.

réaliser capture d'écran Firefox: zone

Une fois la sélection validée vous pourrez ensuite sauvegarder l’image sur votre PC ou directement la copier dans le presse-papiers.

Autre petite astuce au passage: vous pouvez aussi ajouter un bouton de raccourci vers la fonctionnalité Firefox Screenshots à la barre d’outils du navigateur. Pour cela, consultez la base de connaissances.

Les alternatives

Les systèmes d’exploitation récents intègrent généralement un outil de capture d’écran. C’est le cas de Windows avec son outil Capture d’écran et croquis. Quant au navigateur Microsoft Edge il propose lui aussi un outil de capture d’écran.

En guise d’alternative vous pouvez également utiliser le très bon utilitaire Greenshot. Même si la dernière version date d’août 2017, elle propose de nombreuses fonctionnalités d’intégration avec divers logiciels, mais aussi un outil d’édition des captures pour surligner, ajouter du texte, etc.

Sources

[Astuces] Réduire la taille des éléments de l’interface Proton dans Mozilla Firefox 89

[Astuces] Réduire la taille des éléments de l’interface Proton dans Mozilla Firefox 89

Il y a seulement trois jours, mardi 1er juin 2021, Mozilla déployait la version 89 de son navigateur Firefox avec la nouvelle interface: Proton.

Firefox 89 est disponible et inaugure Proton, sa nouvelle interface
– Par Geoffroy Ondet, 01net, 1 juin 2021

Comme plusieurs autres utilisateurs, j’ai cherché à savoir s’il était possible de réduire la taille des éléments de l’interface, dont la hauteur de la barre d’onglets. La réponse est « Oui » et l’astuce a notamment été proposée par quelqu’un sur Reddit.

taille interface Firefox

Actuellement il n’existe pas d’option à modifier dans les paramètres pour faire cela. Il faut donc aller bidouiller dans les variables. On accède à celles-ci en tapant about:config dans la barre d’adresses. Une fois l’avertissement lu et accepté, saisissez dans la recherche le mot-clé browser.uidensity.

taille interface Firefox paramètres avancés

Il existe plusieurs valeurs:

  • 0 : c’est la valeur par défaut pour la nouvelle interface. Par défaut on a donc une barre d’onglets qui permet d’afficher du texte sur deux lignes (par exemple, quand de l’audio est joué dans un onglet, cela affiche la mention « Lecture en cours » sous le nom de la page) ;
  • 1 : cette valeur permet de revenir à une interface plus compacte (voir ci-dessus), d’une taille quasiment identique aux versions précédentes de Firefox. Quand un onglet produit du son, on retrouve l’icône en forme de haut-parleur, comme avant ;
  • 2 : permet également l’affichage sur deux lignes dans les onglets, mais agrandit l’interface par rapport à la valeur par défaut.

Bravo, vous savez désormais comment modifier la taille de l’interface Proton dans Firefox !

A lire également…

[Firefox] Réafficher le message d’avertissement lorsqu’on ferme plusieurs onglets

Cette astuce concerne Firefox 4.0+. Il se pourrait que vous ayez coché la case qui propose de ne plus poser de question lors de la fermeture de plusieurs onglets. Cela est encore plus contrariant si Firefox restaure la session précédente lors de son redémarrage. Comment faire alors pour réinitialiser tous les paramètres ? Restaurer le […]

0 commentaire

Sources

[Actualités] Un incendie s’est produit au data center OVH Strasbourg

[Actualités] Un incendie s’est produit au data center OVH Strasbourg

C’est un coup dur pour l’hébergeur français : en effet dans la nuit de ce 10 mars 2021 un incendie s’est produit au sein du data center d’OVH Strasbourg.

incendie data center OVH

La cause n’est pas encore connue.

D’après un tweet d’Octave Klaba, le directeur général d’OVHCloud, l’incendie a totalement détruit le bâtiment SBG2 dans lequel il s’était déclaré. Une partie du bâtiment SBG1 est détruite. L’un des quatre bâtiments n’aurait pas été impacté et les pompiers ont fait le maximum pour protéger SBG3.

Vers 7h20 du matin le feu était éteint mais les pompiers continuaient de refroidir les bâtiments. L’intervention a duré près de six heures. Les équipes d’OVH doivent patienter avant d’accéder au site, mais le travail risque d’être colossal. Les services sont donc à l’arrêt. Ils sont actuellement remontés sur le site de Gravelines.

Même si le data center contenait principalement des applications web à destination d’entreprises, d’autres personnes sont impactées par ce sinistre. Comme le blogueur Korben le souligne, son forum n’est plus accessible.

Heureusement aucune victime n’est à déplorer. Les quelques personnes présentes sur place au moment de l’incident ont été examinées par les secours mais sont hors de danger.

En cette fin de matinée l’entreprise s’est exprimée via un communiqué de presse.

L’importance des sauvegardes

Cet événement nous rappelle à quel point il est important d’effectuer des sauvegardes de nos données. Nous ne sommes pas à l’abri d’un piratage, d’une défaillance matériel voire justement de ce genre de catastrophe.

Après la lecture des différents articles ce matin concernant cet incendie au data center d’OVH, je me suis empressé de faire un backup complet de mes deux blogs. Et même si votre hébergeur vous fournit une solution de sauvegarde, par exemple sur un serveur FTP, n’hésitez pas à rapatrier celles-ci régulièrement.

L’idée n’est pas d’enfoncer le clou mais de mettre en garde.

Je souhaite, comme d’autres, bon courage à tous ceux qui ont été impactés de près ou de loin par cet incident. La journée risque d’être longue.

Sources

[JS] Récupérer le contenu d’un éditeur tinyMCE

[JS] Récupérer le contenu d’un éditeur tinyMCE

Si vous ne connaissez pas encore tinyMCE, il s’agit d’un éditeur WYSIWYG que vous pouvez intégrer à vos sites. Il est notamment très connu grâce à son utilisation dans WordPress. L’édition Community est gratuite mais il existe également des offres avec support et plugins premium.

Pour une raison ou une autre vous souhaitez peut-être récupérer le contenu d’un éditeur initialisé avant de l’envoyer au serveur. Cela est évidemment possible ! Bien que cet article serve avant tout de mémo il va également vous aider à ne pas plonger dans les méandres de l’énorme documentation de la librairie. Voyons ensemble comment procéder.

Obtenir l’instance d’éditeur

Il faut tout d’abord récupérer l’éditeur souhaité avec la méthode tinymce.get(). Celle-ci reçoit une chaine de caractères représentant l’identifiant du champ qui a servi pour l’initialisation de tinyMCE.

Supposons que vous partiez d’un champ de type textarea, avec l’attribut « id » contenant simplement « myTinyEditor » :

var med = tinymce.get('myTinyEditor');

Cela renverra l’instance de l’éditeur, sinon null s’il n’a pas encore été initialisé.

Récupérer le contenu de l’éditeur

Sur l’instance de l’éditeur que vous venez de récupérer, il suffit d’utiliser getContent() pour retourner le contenu au format « brut » (donc en HTML, qui est généré par tinyMCE).

var contHtml = med.getContent();

Remarque: si le champ est vide, c’est bien une chaine vide que vous obtiendrez.

Vous savez désormais comment récupérer le contenu d’un éditeur tinyMCE, bravo !

A lire également…

[JS] Personnaliser la liste de styles dans tinyMCE

Dans l’éditeur tinyMCE, lorsqu’on choisit de dérouler le menu de sélection du format, on dispose d’éléments par défaut comme les en-têtes (h1 à h6), l’alignement ou bien même la mise en forme classique comme le « gras », « souligné » ou « italique ». Ce menu peut être personnalisé de différentes manières. La méthode la plus simple reste de redéfinir […]

0 commentaire

Sources

Tout est bien décrit dans la documentation de référence.

[JS] Retour sur le rendu d’une page avec PDF.js

[JS] Retour sur le rendu d’une page avec PDF.js

Il y a déjà un moment nous abordions le fait de pouvoir afficher une page de PDF sous forme d’image grâce à la librairie PDF.js. Les différentes mises à jour de celle-ci ont conduit à ce que certains appels soient désormais dépréciés, bien que toujours fonctionnels.

Voici le nouveau code que nous pouvons utiliser :

pdfjsLib.getDocument(
{
	data : ao_pdfData
})
.promise.then(function(dPdf)
{
	dPdf.getPage(ai_num).then(function(page)
	{
		var canvas = document.createElement('canvas');
		canvas.id = as_id + '-page-' + ai_num;
		canvas.className = 'f-canvas';

		var vContext = canvas.getContext('2d');
		var vViewport = page.getViewport({
			scale: af_scale2,
			rotation: 0
		});
		
		canvas.height = vViewport.height;
		canvas.width = vViewport.width;

		var renderContext = {
			canvasContext: vContext,
			viewport: vViewport
		};
		
		page.cleanupAfterRender = true;
		
		var renderTask = page.render(
			renderContext
		);
		
		renderTask.promise.then(function()
		{
			if (canvas.msToBlob) 
			{
				$('#' + img_id).attr("src", 
					canvas.toDataURL(
						"image/jpeg", 0.85
					)
				);
			}
			else
			{
				canvas.toBlob(function(blob) 
				{
					let img = new Image();
					img.onload = function() { 
						URL.revokeObjectURL(img.src); 
					}; 
					img.src = URL.createObjectURL(blob);
					$('#' + img_id).attr("src", 
						img.src
					);
				}, "image/jpg", 0.85);
			}
		})
	});
});

Quelques détails concernant ce code :

  • On charge toujours le document en passant en paramètre les données qui auront été décodées à l’aide de la méthode atob(). On aura passé le contenu du PDF sous forme de chaine de caractères en Base64.
  • Petite différence : on appelle la méthode then() sur un objet « promise ». Même modification pour la tâche de rendu (variable « renderTask »).
  • La variable « viewport » est toujours initialisée avec getViewport() mais on passe un objet contenant les paramètres.
    • scale : l’échelle permettant de définir le zoom (ex: 1,5)
    • rotation : indique la rotation du document (0 = position initiale)
  • On définit toujours la hauteur et la largeur du canevas avec les valeurs du viewport.
  • On ajoute une petite option qui permet d’indiquer que la page doit être libérée et nettoyée après son rendu.
  • Petite nouveauté : l’utilisation de la méthode toBlob() dans les navigateurs qui supportent cela. Notez que si la méthode « msToBlob » existe alors on va plutôt appeler toDataUrl() pour la compatibilité avec IE.
    • On peut également déterminer le type de l’image.
    • On peut aussi indiquer la compression (ex : 0.85, 1 étant la qualité la plus élevée).

Grâce à ces modifications vous n’obtiendrez plus de message dans la console indiquant du code deprecated.

N’hésitez pas à partager votre expérience ou à suggérer des améliorations pour ce code !

[JS] Prism, une alternative à SyntaxHighlighter

[JS] Prism, une alternative à SyntaxHighlighter

En guise d’alternative au très bon SyntaxHighlighter développé par Alex Gorbatchev (voir le site ici) mais qui n’est malheureusement plus mis à jour, on peut utiliser Prism.js.

Il offre la coloration syntaxique pour afficher du code de manière à ce qu’il soit lisible par les utilisateurs. Il se veut intuitif et extensible car il est possible d’ajouter assez facilement des langages à ceux déjà pris en charge. On peut même basculer entre différents thèmes. La librairie est utilisée par de nombreux sites tels que React ou même Drupal.

Pour l’utiliser sur Blogger comme c’est mon cas, il faut importer les scripts et styles de base. Et pour cela il faut modifier le thème du blog. Depuis le tableau de bord de votre blog choisissez Thème puis cliquez sur Modifier le code HTML.

Juste avant l’élément fermant head du thème, il faut inclure les feuilles de style.

<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism.css' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/line-numbers/prism-line-numbers.css' rel='stylesheet'/>

De même qu’il faut inclure le script et l’autoloader avant la fermeture de l’élément body. On y ajoute aussi les différents plugins que l’on veut utiliser. Les éléments obligatoires sont prism-core et prism-autoloader.

<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/components/prism-core.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/autoloader/prism-autoloader.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/plugins/line-numbers/prism-line-numbers.min.js'/>

Ensuite on peut commencer à utiliser les blocs de code. Il faut utiliser les balises pre et code. La seconde prendra une classe qui sera le langage du code que l’on veut formater. La liste complète est disponible sur le site officiel. La classe peut être language-* ou lang-*, l’astérisque étant remplacée par le bon code pioché dans la liste.

<pre>
<code class="lang-html">
<!-- Code qu'on veut formater -->
</code>
</pre>

Il faut faire attention car il faut échapper les caractères du code à formater, sinon il sera évidemment interprété (très important donc si on veut afficher du HTML au lecteur).

Pour éviter de le faire à la main utilisez plutôt l’outil en ligne Quick Escape Tool.Petit truc supplémentaire avant de nous quitter : afin d’utiliser le plugin line-numbers (destiné à afficher les numéros de ligne) que nous avons importé dans le second exemple ci-dessus, il vous suffira d’ajouter la classe « line-numbers » à l’élément ouvrant pre. N’hésitez pas à consulter le site officiel : vous y découvrirez de nombreux plugins ainsi que des tutoriels.

Bon développement !

Prismjs.com

[Java] Gestion des erreurs à l’aide d’une servlet

[Java] Gestion des erreurs à l’aide d’une servlet

Dans votre application web, il est possible de réaliser une gestion d’exceptions – notamment pour intercepter ServletException – en passant par une servlet. Par défaut, les erreurs telles que le code HTTP 500 sont gérées par le serveur et renvoient vers une page par défaut. L’idée est donc de changer ce comportement en renvoyant par exemple une information en JSON ou en redirigeant vers une JSP.

On va donc créer une classe qui hérite de HttpServlet. Celle-ci devra implémenter des fonctions pour gérer les différentes méthodes HTTP (exemple : PUT, GET, POST…).

public class MaServletHttp extends HttpServlet 
{
    public void doGet(HttpServletRequest request, 
        HttpServletResponse response) throws IOException 
    {
        // On gère l'erreur...
    }
}

Comme on peut le constater on a donc créé une fonction qui sera exécutée lorsque la méthode GET est utilisée. Typiquement lorsqu’on appelle une URL et qu’on spécifie un ensemble de paramètres dans celle-ci. Il faudra donc ajouter les autres fonctions comme doPost() – généralement appelée lors d’un envoi de formulaire – ou doPut().On remarque aussi l’annotation @WebServlet qui permet de définir tout un ensemble d’informations utiles, notamment l’ « URL pattern ». On peut soit spécifier cette valeur directement comme dans l’exemple ci-dessus, soit en spécifiant les attributs de la manière suivante.

@WebServlet(
        name = "maBelleServlet",
        description = "Gestion d'exceptions",
        urlPatterns = "/maServletHttp"
)
public class MaServletHttp extends HttpServlet 
{
    // Code de la servlet...
}

Certains attributs de la servlet ne sont utiles que pour les outils utilisés lors du développement (par exemple, description ou encore smallIcon). Ces attributs sont décrits dans la documentation de JavaEE 7.Il faut ensuite modifier le fichier web.xml pour spécifier dans quels cas la servlet doit être appelée pour gérer les exceptions ou les différents code d’erreur. Dans l’exemple ci-dessous on va faire en sorte que la servlet soit appelée en cas d’erreur HTTP 500.

<web-app ... >
    <error-page> 
        <error-code>500</error-code> 
        <location>/maServletHttp</location> 
    </error-page>
</web-app>

On a donc ajouté un élément « error-page » dans le fichier descriptif de l’application. Pour cet élément on a spécifié le code d’erreur grâce à l’élément « error-code » et l’emplacement de la servlet (qui correspond au URL pattern défini précédemment dans l’annotation de la classe Java) représenté par l’élément « location« .

A la place de l’élément « error-code » on peut aussi spécifier « exception-type » et indiquer les erreurs que la servlet devra intercepter. On y spécifie alors le canonical name de la classe d’exception visée (ex : java.lang.NullPointerException).

Une fois le fichier de configuration XML modifié, on peut s’attaquer au code de la servlet. Aussi bien lorsqu’on redirige vers une JSP qu’une servlet, des attributs contenant des informations à propos de l’erreur qui se produit, sont définis au niveau de la requête et peuvent donc être rapatriés dans le code.

@WebServlet("/maServletHttp")
public class MaServletHttp extends HttpServlet 
{
    public void doGet(HttpServletRequest request, 
        HttpServletResponse response) throws IOException 
    {
        Integer li_st = (Integer) request.getAttribute(
                "javax.servlet.error.status_code"
        );

        Throwable lo_e = (Throwable) request.getAttribute(
                "javax.servlet.error.exception"
        );

        String ls_svlt = (String) request.getAttribute(
                "javax.servlet.error.servlet_name"
        );
        
        // Envoi de la réponse après.
        // Voir ci-dessous.
    }
}

Voici le tableau des attributs disponibles (source : tutorialspoint).

L’attribut qui contient le nom de la servlet est intéressant car il s’agit de la source, là où l’erreur s’est produite. Cela signifie qu’en fonction du nom on peut imaginer un traitement différent en retour.L’exemple ci-dessous renvoie simplement du JSON au client après une erreur dans un Web Service.

@WebServlet("/maServletHttp")
public class MaServletHttp extends HttpServlet 
{
    public void doGet(HttpServletRequest request, 
        HttpServletResponse response) throws IOException 
    {
        // Récupération des attributs avant.
        // Voir ci-dessus.
        if (ls_svlt.equals("webserviceServlet"))
        {
            response.setContentType("application/json");
            response.getWriter().print(
                "{ key1: 'val1', key2: 'val2' }"
            );

            response.getWriter().flush();
        }
    }
}

On peut également modifier le code de retour (par exemple, si le code était 500, on peut le redéfinir au niveau de l’objet HttpServletResponse).

Sources

Baeldung
CodeJava.net
LogicBig
Oracle
Tutorialspoint

[JS] Afficher un PDF en image avec pdf.js

[JS] Afficher un PDF en image avec pdf.js

Il existe plusieurs méthodes en Java pour transformer un PDF (ou une partie seulement) en image côté serveur, afin de renvoyer le résultat au client, pour qu’il ne lui reste plus qu’à l’afficher. La première qui vient à l’esprit est Apache PDFBox. D’autres comme IcePDF ou JPedal font bien le job aussi, mais sont souvent payantes. De plus, le traitement peut évidemment vite devenir lourd pour le serveur si de nombreuses requêtes sont effectuées par plusieurs utilisateurs.

On peut imaginer laisser le client faire le boulot, en utilisant la librairie pdf.js, qui est sous licence Apache. Elle permet de visualiser des documents PDF dans une page web mais aussi de les transformer en image ce qui nous intéresse ici.

L’idée de l’exemple qui suit est de transformer une page donnée en image. Après ajout du script principal dans l’élément head, on va créer une fonction qui recevra plusieurs paramètres tels que les données du fichier PDF (sous forme de chaine encodée en Base64), le numéro de page à transformer, un ID pour la création du canvas, une valeur pour l’échelle du rendu, et l’identifiant de l’élément img qui recevra le résultat.

PDFJS.getDocument({data : atob(ao_pdfData)})
    .then(function(ao_pdf) 
{
 ao_pdf.getPage(ai_num).then(function(ao_page) 
 {
  var lo_canvas = document.createElement('canvas');
  lo_canvas.id = as_idd + '-page-' + ai_num;
  lo_canvas.className = 'f-canvas';

  var lo_context = lo_canvas.getContext('2d');
  var lo_viewport = ao_page.getViewport(af_scale2);
  lo_canvas.height = lo_viewport.height;
  lo_canvas.width = lo_viewport.width;
  
  var lo_renderContext = {
   canvasContext: lo_context,
   viewport: lo_viewport
  };

  ao_page.render(lo_renderContext).then(function()
  {
   $('#' + as_imageId)
     .attr("src", lo_canvas.toDataURL());
  });
 });
});

La fonction PDFJS.getDocument() reçoit en paramètre les données, décodées par la fonction JavaScript atob().

Une fois le document chargé, on va demander à récupérer la page dont le numéro est passé en paramètre. Une fois que cela est fait on exécute une fonction pour traiter les données de cette fameuse page. On crée un élément canvas temporaire, qu’on pourra stocker – ou pas – dans la page. On récupère aussi le contexte de dessin de ce canvas.

On récupère le viewport en indiquant l’échelle (ex : 1.5f). On définit ensuite la hauteur et la largeur du canvas avec les valeurs du viewport.

On crée ensuite un objet qui contiendra le contexte de dessin et le viewport. Ceux-ci seront passés à la fonction render() qui est une fonction de l’objet page. Lorsque le rendu est terminé, on peut récupérer la source de l’image depuis le canvas, grâce à la fonction toDataURL() de ce dernier.