Gérer les cadres d'image dans les présentations avec JavaScript
Vue d’ensemble
Un cadre d’image est une forme de diapositive qui affiche une image. Dans Aspose.Slides, la ressource image et la forme qui l’affiche sont des objets séparés : une Presentation possède les ressources d’images intégrées via sa ImageCollection, tandis qu’un PictureFrame contrôle la position, la taille, le format de ligne, la rotation, le recadrage, les effets d’image et les autres paramètres au niveau du cadre.
Cette séparation est utile lorsque la même image est affichée plusieurs fois. Ajoutez l’image à la présentation une fois, conservez le PPImage retourné, et utilisez cette ressource d’image lors de la création de cadres d’image.
Les cadres d’image peuvent contenir des images raster telles que PNG ou JPEG ainsi que des images vectorielles SVG. Ils peuvent également référencer des images liées au lieu de stocker les octets de l’image dans la présentation. Ce choix affecte la portabilité, la taille du fichier, l’extraction et le comportement d’exportation, il est donc utile de décider comment l’image doit être stockée avant d’appliquer le formatage ou l’optimisation.
Ajouter et formater une image intégrée
Pour une image intégrée, ajoutez les données de l’image à la présentation et créez un cadre d’image avec ShapeCollection.addPictureFrame. L’image devient partie du paquet de la présentation, ainsi la présentation reste autonome lorsqu’elle est déplacée vers un autre ordinateur.
L’exemple suivant ajoute une image PNG, crée un cadre aux dimensions natives de l’image et applique le format de ligne ainsi que la rotation :
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
const java = require("java");
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(0);
let image;
const sourceImage = aspose.slides.Images.fromFile("image.png");
try {
image = presentation.getImages().addImage(sourceImage);
} finally {
sourceImage.dispose();
}
const pictureFrame = slide.getShapes().addPictureFrame(aspose.slides.ShapeType.Rectangle, 50, 100, image.getWidth(), image.getHeight(), image);
pictureFrame.getLineFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
pictureFrame.getLineFormat().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "BLUE"));
pictureFrame.getLineFormat().setWidth(3);
pictureFrame.setRotation(15);
presentation.save("picture-frame.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Le cadre d’image contrôle la géométrie affichée ; modifier la taille du cadre ne change pas les dimensions en pixels d’origine stockées dans la ressource d’image intégrée. Cette distinction devient importante lors du recadrage ou de la compression d’une image ultérieurement.
Utiliser l’échelle relative
PictureFrame expose le redimensionnement relatif de la largeur et de la hauteur du cadre via setRelativeScaleWidth et setRelativeScaleHeight. Une valeur de 1.0 correspond à 100 % de la taille originale de l’image. L’échelle relative est utile lorsqu’un flux de travail doit préserver une relation avec la taille de l’image source au lieu de calculer manuellement les dimensions finales.
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
const java = require("java");
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(0);
let image;
const sourceImage = aspose.slides.Images.fromFile("image.png");
try {
image = presentation.getImages().addImage(sourceImage);
} finally {
sourceImage.dispose();
}
const pictureFrame = slide.getShapes().addPictureFrame(aspose.slides.ShapeType.Rectangle, 50, 50, 100, 100, image);
pictureFrame.setRelativeScaleWidth(java.newFloat(1.35));
pictureFrame.setRelativeScaleHeight(java.newFloat(0.8));
presentation.save("relative-scale.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
L’échelle relative modifie les paramètres d’échelle du cadre ; elle ne rééchantillonne pas et ne compresse pas l’image intégrée.
Images intégrées et liées
Une image intégrée stocke les données de l’image à l’intérieur de la présentation et est donc le choix le plus sûr pour la portabilité et un rendu prévisible. Une image liée stocke un emplacement externe via la méthode Picture.setLinkPathLong au lieu d’intégrer les données de l’image de la même manière.
Les images liées peuvent réduire la quantité de données d’image stockées dans le PPTX, mais elles introduisent une dépendance externe. Le fichier lié doit rester accessible à l’application qui ouvre ou rend la présentation. Si le chemin change, le fichier est déplacé ou la ressource n’est plus disponible, l’image liée peut ne pas s’afficher comme prévu. Pour les présentations qui doivent être envoyées par courriel, archivées ou rendues dans des environnements isolés, les images intégrées sont généralement plus fiables.
Ajouter une image liée
L’exemple suivant crée un cadre d’image et le pointe vers un fichier image local. Il traite uniquement du lien d’image ; le lien vidéo est un flux de travail média séparé et n’est intentionnellement pas mélangé à cet exemple.
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
const path = require("path");
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(0);
const pictureFrame = slide.getShapes().addPictureFrame(aspose.slides.ShapeType.Rectangle, 50, 50, 320, 180, null);
const linkPath = path.resolve("image.png");
pictureFrame.getPictureFormat().getPicture().setLinkPathLong(linkPath);
presentation.save("linked-image.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Utilisez les liens lorsque la gestion de fichiers externes est intentionnelle. Ne les utilisez pas simplement comme remplacement de la compression : un petit PPTX avec des dépendances d’image cassées est généralement moins utile qu’une présentation plus grande et autonome.
Extraire des images à partir de cadres d’image
Avant d’extraire une image d’une présentation existante, vérifiez qu’une forme est réellement un PictureFrame et qu’elle contient une image intégrée. Les cadres d’image liés peuvent ne pas contenir d’octets d’image qui peuvent être extraits de la même façon.
Extraire une image raster
L’API d’image moderne utilise directement IImage. L’exemple suivant trouve la première image raster intégrée sur une diapositive et l’enregistre au format PNG :
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
const java = require("java");
const presentation = new aspose.slides.Presentation("input.pptx");
try {
const slide = presentation.getSlides().get_Item(0);
for (let i = 0; i < slide.getShapes().size(); i++) {
const shape = slide.getShapes().get_Item(i);
if (!java.instanceOf(shape, "com.aspose.slides.IPictureFrame")) {
continue;
}
const embeddedImage = shape.getPictureFormat().getPicture().getImage();
if (embeddedImage == null || embeddedImage.getSvgImage() != null) {
continue;
}
const rasterImage = embeddedImage.getImage();
try {
rasterImage.save("extracted-image.png", aspose.slides.ImageFormat.Png);
} finally {
rasterImage.dispose();
}
break;
}
} finally {
presentation.dispose();
}
Enregistrer via IImage.save convertit l’image extraite dans le format de sortie demandé. Si vous avez besoin des octets encodés stockés dans la présentation plutôt que d’un fichier raster converti, utilisez les données binaires de la ressource d’image à la place.
Extraire une image SVG
Pour une image SVG, le PPImage expose un objet SvgImage. Cela vous permet de récupérer les données SVG directement au lieu de rasteriser d’abord l’image.
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
const fs = require("fs");
const java = require("java");
const presentation = new aspose.slides.Presentation("input.pptx");
try {
const slide = presentation.getSlides().get_Item(0);
for (let i = 0; i < slide.getShapes().size(); i++) {
const shape = slide.getShapes().get_Item(i);
if (!java.instanceOf(shape, "com.aspose.slides.IPictureFrame")) {
continue;
}
const embeddedImage = shape.getPictureFormat().getPicture().getImage();
const svgImage = embeddedImage != null ? embeddedImage.getSvgImage() : null;
if (svgImage == null) {
continue;
}
fs.writeFileSync("extracted-image.svg", svgImage.getSvgData());
break;
}
} finally {
presentation.dispose();
}
Conserver le contenu SVG en tant que SVG préserve la source vectorielle à l’intérieur de la présentation. Les exportations raster telles que PNG ou JPEG rendent nécessairement ce contenu vectoriel en pixels. L’exportation de diapositive en PDF ou SVG est également une opération de rendu, de sorte que les graphiques exportés ne doivent pas être traités comme une copie octet à octet du SVG intégré original ; utilisez les données de SvgImage.getSvgData lorsqu’il faut le vecteur d’origine lui‑même.
Recadrer une image
Le recadrage modifie la partie de l’image visible à l’intérieur du cadre. Les valeurs de recadrage sur PictureFillFormat sont exprimées en pourcentage des dimensions de l’image source. Le recadrage ne supprime pas initialement les pixels cachés de l’image intégrée ; il ne change que la région visible.
L’exemple suivant trouve un cadre d’image en toute sécurité et applique des valeurs de recadrage :
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
const java = require("java");
const presentation = new aspose.slides.Presentation("input.pptx");
try {
const slide = presentation.getSlides().get_Item(0);
let pictureFrame = null;
for (let i = 0; i < slide.getShapes().size(); i++) {
const shape = slide.getShapes().get_Item(i);
if (java.instanceOf(shape, "com.aspose.slides.IPictureFrame")) {
pictureFrame = shape;
break;
}
}
if (pictureFrame != null) {
pictureFrame.getPictureFormat().setCropLeft(java.newFloat(23.6));
pictureFrame.getPictureFormat().setCropRight(java.newFloat(21.5));
pictureFrame.getPictureFormat().setCropTop(java.newFloat(3));
pictureFrame.getPictureFormat().setCropBottom(java.newFloat(31));
presentation.save("cropped-image.pptx", aspose.slides.SaveFormat.Pptx);
}
} finally {
presentation.dispose();
}
Comme les données d’image cachées restent présentes, le recadrage peut être modifié ultérieurement sans perdre les pixels d’origine. Si la taille du fichier importe plus que la réversibilité, les zones recadrées peuvent être physiquement supprimées comme décrit dans la section suivante.
Supprimer les données d’image recadrées
PictureFillFormat.deletePictureCroppedAreas supprime les données d’image situées en dehors du rectangle de recadrage actuel et renvoie la ressource d’image résultante. Cela peut réduire la taille du fichier, mais il s’agit d’une optimisation destructive : après l’enregistrement de la présentation, les pixels supprimés ne sont plus disponibles pour une opération de décadrage ultérieure.
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
const java = require("java");
const presentation = new aspose.slides.Presentation("input.pptx");
try {
const slide = presentation.getSlides().get_Item(0);
let pictureFrame = null;
for (let i = 0; i < slide.getShapes().size(); i++) {
const shape = slide.getShapes().get_Item(i);
if (java.instanceOf(shape, "com.aspose.slides.IPictureFrame")) {
pictureFrame = shape;
break;
}
}
if (pictureFrame != null) {
const croppedImage = pictureFrame.getPictureFormat().deletePictureCroppedAreas();
if (croppedImage != null) {
presentation.save("cropped-data-removed.pptx", aspose.slides.SaveFormat.Pptx);
}
}
} finally {
presentation.dispose();
}
La méthode peut ajouter une nouvelle ressource d’image à la présentation. Si l’image originale est également utilisée par d’autres cadres d’image, ces cadres ont toujours besoin de leur ressource existante, de sorte que la suppression des zones recadrées ne réduit pas nécessairement le nombre total d’images. Recadrer du contenu WMF ou EMF avec cette méthode rasterise le résultat recadré en PNG.
Compresser les images raster
PictureFillFormat.compressImage réduit la résolution d’une image raster par rapport à la taille à laquelle l’image est affichée. Elle peut également supprimer les zones recadrées dans la même opération. La méthode renvoie true lorsque l’image a été redimensionnée ou recadrée et false lorsqu’aucune modification n’était nécessaire.
Utilisez une valeur prédéfinie de PicturesCompression lorsqu’une résolution cible standard suffit :
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
const java = require("java");
const presentation = new aspose.slides.Presentation("input.pptx");
try {
const slide = presentation.getSlides().get_Item(0);
let pictureFrame = null;
for (let i = 0; i < slide.getShapes().size(); i++) {
const shape = slide.getShapes().get_Item(i);
if (java.instanceOf(shape, "com.aspose.slides.IPictureFrame")) {
pictureFrame = shape;
break;
}
}
if (pictureFrame != null) {
const compressed = pictureFrame.getPictureFormat().compressImage(true, aspose.slides.PicturesCompression.Dpi150);
console.log(compressed ? "The image was compressed." : "No compression was necessary.");
presentation.save("compressed-image.pptx", aspose.slides.SaveFormat.Pptx);
}
} finally {
presentation.dispose();
}
Une valeur DPI positive personnalisée peut être fournie à la place d’une valeur prédéfinie lorsqu’une cible spécifique est requise.
La compression est destinée aux images raster. Le contenu SVG et les métas fichiers ne sont pas réduits par ce workflow de compression raster. Rappelez‑vous également que la résolution réduite et les zones recadrées supprimées ne peuvent pas être récupérées à partir de la présentation optimisée. Choisissez une résolution cible en fonction de la plus grande taille à laquelle l’image sera effectivement visualisée ou exportée, plutôt que d’appliquer le DPI le plus bas globalement.
Gérer les effets de transformation d’image
Pour un workflow complet couvrant la luminosité, le contraste, les transformations de couleur, le flou, les effets alpha, les chaînes ordonnées, l’inspection, la suppression et la vérification en aller‑retour, voyez Image Transform Effects.
Verrouiller la géométrie du cadre d’image
Les paramètres de PictureFrameLock contrôlent quelles opérations d’édition sont désactivées pour un cadre d’image. Par exemple, setAspectRatioLocked préserve les proportions de la forme pendant son redimensionnement.
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(0);
let image;
const sourceImage = aspose.slides.Images.fromFile("image.png");
try {
image = presentation.getImages().addImage(sourceImage);
} finally {
sourceImage.dispose();
}
const pictureFrame = slide.getShapes().addPictureFrame(aspose.slides.ShapeType.Rectangle, 50, 100, image.getWidth(), image.getHeight(), image);
pictureFrame.getPictureFrameLock().setAspectRatioLocked(true);
presentation.save("locked-picture-frame.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Le verrou s’applique à la forme du cadre d’image. Il ne force pas l’image source à être rééchantillonnée ou modifiée de façon permanente pour correspondre au même ratio d’aspect.
Ajuster les valeurs StretchOffset
Lorsque le mode de remplissage d’image est étiré, les valeurs stretch‑offset sur PictureFillFormat définissent le rectangle de remplissage par rapport à la boîte englobante du cadre d’image. Des pourcentages positifs créent un retrait depuis un bord, tandis que des pourcentages négatifs créent un dépassement.
Ceci est différent du recadrage. Les valeurs de recadrage sélectionnent la partie de l’image source qui est visible ; les stretch‑offset changent le rectangle dans lequel le remplissage d’image visible est étiré.
var aspose = aspose || {};
aspose.slides = require("aspose.slides.via.java");
const java = require("java");
const presentation = new aspose.slides.Presentation();
try {
const slide = presentation.getSlides().get_Item(0);
let image;
const sourceImage = aspose.slides.Images.fromFile("image.png");
try {
image = presentation.getImages().addImage(sourceImage);
} finally {
sourceImage.dispose();
}
const pictureFrame = slide.getShapes().addPictureFrame(aspose.slides.ShapeType.Rectangle, 10, 10, 400, 300, image);
pictureFrame.getPictureFormat().setPictureFillMode(java.newByte(aspose.slides.PictureFillMode.Stretch));
pictureFrame.getPictureFormat().setStretchOffsetLeft(java.newFloat(12));
pictureFrame.getPictureFormat().setStretchOffsetRight(java.newFloat(12));
pictureFrame.getPictureFormat().setStretchOffsetTop(java.newFloat(8));
pictureFrame.getPictureFormat().setStretchOffsetBottom(java.newFloat(8));
presentation.save("stretch-offsets.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
Utilisez les stretch‑offset pour le placement du remplissage. Utilisez les propriétés de recadrage lorsque le but est de masquer les bords de l’image source.
Considérations de stockage, de taille de fichier et d’exportation
Les principaux compromis sont plus faciles à gérer lorsque le stockage des images et le formatage des cadres d’image sont traités séparément :
- Images intégrées rendent la présentation autonome et sont les plus fiables pour le partage et le rendu côté serveur, mais les grandes images raster augmentent la taille du PPTX et l’utilisation de la mémoire.
- Images liées peuvent garder le paquet plus petit, mais la présentation dépend de la disponibilité des fichiers externes aux chemins ou emplacements stockés.
- Recadrage est initialement non destructif. Les pixels cachés restent intégrés jusqu’à ce que les zones recadrées soient explicitement supprimées ou retirées lors de la compression.
- Compression peut réduire considérablement la taille du fichier pour les images raster surdimensionnées, mais elle sacrifie la résolution source. Elle doit être appliquée après que la taille prévue sur la diapositive soit connue.
- Images SVG doivent rester au format SVG lorsque la préservation du vecteur est importante. Extrayez le SVG intégré directement lorsque vous avez besoin de la ressource vectorielle elle‑même. Les exportations de diapositive raster telles que PNG ou JPEG convertissent toujours la diapositive rendue en pixels.
- Images répétées devraient réutiliser une ressource PPImage existante lorsqu’il est possible, au lieu de charger à nouveau le même fichier dans le workflow de la présentation.
Pour les grandes présentations, l’optimisation des images est généralement la plus efficace lorsqu’elle est réalisée de manière sélective : conservez les logos et diagrammes en contenu vectoriel, compressez les photographies en fonction de leur taille d’affichage réelle, supprimez les pixels recadrés uniquement lorsque l’édition ultérieure n’est pas requise, et évitez les liens externes sauf si la gestion des dépendances fait partie de la conception du déploiement.
FAQ
Quelle est la différence entre un cadre d’image et une ressource d’image ?
Un PPImage représente une ressource d’image associée à la présentation. Un PictureFrame est une forme sur une diapositive qui affiche une image et stocke la géométrie et le formatage au niveau du cadre tels que la taille, la rotation, les valeurs de recadrage, les effets et les verrous.
Dois-je intégrer ou lier les images ?
Intégrez les images lorsque la présentation doit être portable, archivée ou rendue sans accès à des ressources externes. Liez les images uniquement lorsque le fait de garder les fichiers image hors du PPTX est intentionnel et que les emplacements externes peuvent être maintenus de façon fiable.
Le recadrage réduit-il la taille du fichier PPTX ?
Pas en soi. Les paramètres de recadrage normaux masquent des parties de l’image source mais conservent les pixels sous‑jacents. Utilisez PictureFillFormat.deletePictureCroppedAreas ou la compression d’image avec suppression des zones recadrées lorsque ces pixels peuvent être éliminés de façon permanente.
Puis-je restaurer la qualité de l’image après compression ?
Non. La compression peut réduire la résolution raster stockée, et la suppression des zones recadrées supprime les données d’image. Conservez l’image source originale hors de la présentation si un éditorial haute résolution ultérieur peut être nécessaire.
Comment gérer les images SVG ?
Conservez le contenu SVG en tant que SVG lorsque la fidélité vectorielle importe. Le SvgImage intégré peut être extrait directement. Rendre une diapositive en format raster tel que PNG ou JPEG rasterise le SVG comme partie de l’image de la diapositive.
Comment éviter les conversions non sécurisées lors de la lecture des diapositives existantes ?
Vérifiez le type de forme avant d’utiliser les membres spécifiques aux cadres d’image. Un test java.instanceOf contre PictureFrame évite les conversions invalides et permet au code de gérer les diapositives qui ne contiennent pas de cadres d’image.