Optimiser la gestion des images dans les présentations avec JavaScript

Images dans les diapositives des présentations

Les images rendent les présentations plus attrayantes et intéressantes. Dans Microsoft PowerPoint, vous pouvez insérer des images depuis un fichier, Internet ou d’autres emplacements sur les diapositives. De même, Aspose.Slides vous permet d’ajouter des images aux diapositives de vos présentations via différentes méthodes.

Tip

Aspose propose des convertisseurs gratuits —JPEG to PowerPoint et PNG to PowerPoint—qui permettent de créer rapidement des présentations à partir d’images.

Info

Si vous souhaitez ajouter une image en tant qu’objet image—en particulier si vous prévoyez d’utiliser les options de mise en forme standard pour modifier sa taille, ajouter des effets, etc.—voir Picture Frame.

Aspose.Slides prend en charge les opérations avec les images dans ces formats populaires : JPEG, PNG, GIF et autres.

Ajouter des images stockées localement aux diapositives

Vous pouvez ajouter une ou plusieurs images de votre ordinateur sur une diapositive d’une présentation. Ce code d’exemple en JavaScript montre comment ajouter une image à une diapositive :

var pres = new aspose.slides.Presentation();
try {
    var slide = pres.getSlides().get_Item(0);
    var picture;
    var image = aspose.slides.Images.fromFile("image.png");
    try {
        picture = pres.getImages().addImage(image);
    } finally {
        if (image != null) {
            image.dispose();
        }
    }
    slide.getShapes().addPictureFrame(aspose.slides.ShapeType.Rectangle, 10, 10, 100, 100, picture);
    pres.save("pres.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Ajouter des images depuis le flux aux diapositives

Si l’image que vous souhaitez ajouter à une diapositive n’est pas disponible sur votre ordinateur, vous pouvez l’ajouter directement depuis le web.

Ce code d’exemple montre comment ajouter une image depuis le web à une diapositive en JavaScript :

var pres = new aspose.slides.Presentation();
try {
    // Accède à la première diapositive
    var sld = pres.getSlides().get_Item(0);
    // Charge un fichier Excel en flux
    var readStream = fs.readFileSync("book1.xlsx");
    var byteArray = Array.from(readStream);
    // Crée un objet de données pour l'intégration
    var dataInfo = new aspose.slides.OleEmbeddedDataInfo(java.newArray("byte", byteArray), "xlsx");
    // Ajoute une forme de cadre d'objet OLE
    var oleObjectFrame = sld.getShapes().addOleObjectFrame(0, 0, pres.getSlideSize().getSize().getWidth(), pres.getSlideSize().getSize().getHeight(), dataInfo);
    // Écrit le fichier PPTX sur le disque
    pres.save("OleEmbed_out.pptx", aspose.slides.SaveFormat.Pptx);
} catch (e) {console.log(e);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Ajouter des images aux masques de diapositives

Un masque de diapositive est la diapositive principale qui stocke et contrôle les informations (thème, disposition, etc.) de toutes les diapositives qui en dépendent. Ainsi, lorsque vous ajoutez une image à un masque de diapositive, cette image apparaît sur chaque diapositive dépendante.

Ce code d’exemple en JavaScript montre comment ajouter une image à un masque de diapositive :

var pres = new aspose.slides.Presentation();
try {
    var slide = pres.getSlides().get_Item(0);
    var masterSlide = slide.getLayoutSlide().getMasterSlide();
    var picture;
    var image = aspose.slides.Images.fromFile("image.png");
    try {
        picture = pres.getImages().addImage(image);
    } finally {
        if (image != null) {
            image.dispose();
        }
    }
    masterSlide.getShapes().addPictureFrame(aspose.slides.ShapeType.Rectangle, 10, 10, 100, 100, picture);
    pres.save("pres.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Ajouter des images comme arrière‑plan de diapositive

Vous pouvez décider d’utiliser une image comme arrière‑plan pour une diapositive spécifique ou plusieurs diapositives. Dans ce cas, consultez Setting Images as Backgrounds for Slides.

Ajouter du SVG aux présentations

Vous pouvez ajouter ou insérer n’importe quelle image dans une présentation en utilisant la méthode addPictureFrame appartenant à la classe ShapeCollection.

Pour créer un objet image basé sur un SVG, procédez ainsi :

Créer un objet SvgImage pour l’insérer dans ImageShapeCollection
Créer un objet PPImage à partir de ISvgImage
Créer un objet PictureFrame en utilisant la classe PPImage

Ce code d’exemple montre comment implémenter les étapes ci‑dessus pour ajouter une image SVG dans une présentation :

// Instancier la classe Presentation qui représente un fichier PPTX
var pres = new aspose.slides.Presentation();
try {
    var svgContent = java.newInstanceSync("java.lang.String", java.newInstanceSync("java.io.FileInputStream", java.newInstanceSync("java.io.File", "image.svg")));
    var svgImage = new aspose.slides.SvgImage(svgContent);
    var ppImage = pres.getImages().addImage(svgImage);
    pres.getSlides().get_Item(0).getShapes().addPictureFrame(aspose.slides.ShapeType.Rectangle, 0, 0, ppImage.getWidth(), ppImage.getHeight(), ppImage);
    pres.save("output.pptx", aspose.slides.SaveFormat.Pptx);
} catch (e) {console.log(e);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Convertir le SVG en un ensemble de formes

La conversion du SVG en un ensemble de formes par Aspose.Slides est similaire à la fonctionnalité de PowerPoint utilisée pour travailler avec les images SVG :

PowerPoint Popup Menu

La fonctionnalité est fournie par l’une des surcharges de la méthode addGroupShape de la classe ShapeCollection qui accepte un objet SvgImage en premier argument.

Ce code d’exemple montre comment utiliser la méthode décrite pour convertir un fichier SVG en un ensemble de formes :

// Créer une nouvelle présentation
var presentation = new aspose.slides.Presentation();
try {
    // Lire le contenu du fichier SVG
    var svgContent = java.newInstanceSync("java.io.FileInputStream", java.newInstanceSync("java.io.File", "image.svg"));
    // Créer un objet SvgImage
    var svgImage = new aspose.slides.SvgImage(svgContent);
    // Obtenir la taille de la diapositive
    var slideSize = presentation.getSlideSize().getSize();
    // Convertir l'image SVG en groupe de formes en l'ajustant à la taille de la diapositive
    presentation.getSlides().get_Item(0).getShapes().addGroupShape(svgImage, 0.0, 0.0, slideSize.getWidth(), slideSize.getHeight());
    // Enregistrer la présentation au format PPTX
    presentation.save("output.pptx", aspose.slides.SaveFormat.Pptx);
} catch (e) {console.log(e);
} finally {
    if (presentation != null) {
        presentation.dispose();
    }
}

Ajouter des images au format EMF dans les diapositives

Aspose.Slides for Node.js via Java vous permet de générer des images EMF à partir de feuilles Excel et d’ajouter ces images au format EMF dans les diapositives avec Aspose.Cells.

Ce code d’exemple montre comment réaliser la tâche décrite :

var book = java.newInstanceSync("aspose.cells.Workbook", "chart.xlsx");
var sheet = book.getWorksheets().get(0);
var options = java.newInstanceSync("aspose.cells.ImageOrPrintOptions");
options.setHorizontalResolution(200);
options.setVerticalResolution(200);
options.setImageType(java.getStaticFieldValue("ImageType", "EMF"));
var sr = java.newInstanceSync("SheetRender", sheet, options);
var pres = new aspose.slides.Presentation();
try {
    pres.getSlides().removeAt(0);
    var EmfSheetName = "";
    for (var j = 0; j < sr.getPageCount(); j++) {
        EmfSheetName = ((("test" + sheet.getName()) + " Page") + (j + 1)) + ".out.emf";
        sr.toImage(j, EmfSheetName);
        var picture;
        var image = aspose.slides.Images.fromFile(EmfSheetName);
        try {
            picture = pres.getImages().addImage(image);
        } finally {
            if (image != null) {
                image.dispose();
            }
        }
        var slide = pres.getSlides().addEmptySlide(pres.getLayoutSlides().getByType(aspose.slides.SlideLayoutType.Blank));
        var m = slide.getShapes().addPictureFrame(aspose.slides.ShapeType.Rectangle, 0, 0, pres.getSlideSize().getSize().getWidth(), pres.getSlideSize().getSize().getHeight(), picture);
    }
    pres.save("output.pptx", aspose.slides.SaveFormat.Pptx);
} catch (e) {console.log(e);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

Remplacer des images dans la collection d’images

Aspose.Slides vous permet de remplacer les images stockées dans la collection d’images d’une présentation (y compris celles utilisées par les formes de diapositives). Cette section présente plusieurs approches pour mettre à jour les images de la collection. L’API offre des méthodes simples pour remplacer une image à l’aide de données binaires brutes, d’une instance IImage ou d’une autre image déjà présente dans la collection.

Suivez les étapes ci‑dessous :

Charger le fichier de présentation contenant des images à l’aide de la classe Presentation.
Charger une nouvelle image depuis un fichier dans un tableau d’octets.
Remplacer l’image cible par la nouvelle image à l’aide du tableau d’octets.
Dans la deuxième approche, charger l’image dans un objet IImage et remplacer l’image cible par cet objet.
Dans la troisième approche, remplacer l’image cible par une image déjà présente dans la collection d’images de la présentation.
Enregistrer la présentation modifiée au format PPTX.

// Instancie la classe Presentation qui représente un fichier de présentation.
const presentation = new aspose.slides.Presentation("sample.pptx");
try {
    // Première méthode.
    const imageData = java.newArray("byte", Array.from(fs.readFileSync("image0.jpeg")));
    let oldImage = presentation.getImages().get_Item(0);
    oldImage.replaceImage(imageData);
    
    // Deuxième méthode.
    const newImage = aspose.slides.Images.fromFile("image1.png");
    oldImage = presentation.getImages().get_Item(1);
    oldImage.replaceImage(newImage);
    newImage.dispose();
    
    // Troisième méthode.
    oldImage = presentation.getImages().get_Item(2);
    oldImage.replaceImage(presentation.getImages().get_Item(3));
    
    // Enregistre la présentation dans un fichier.
    presentation.save("output.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    presentation.dispose();
}

Info

En utilisant le convertisseur gratuit Aspose FREE Text to GIF, vous pouvez facilement animer du texte, créer des GIF à partir de texte, etc.

FAQ

La résolution d’origine de l’image reste-t-elle intacte après l’insertion ?

Oui. Les pixels sources sont conservés, mais l’apparence finale dépend de la manière dont le picture est mis à l’échelle sur la diapositive et de toute compression appliquée lors de l’enregistrement.

Quelle est la meilleure façon de remplacer le même logo sur des dizaines de diapositives d’un coup ?

Placez le logo sur le masque de diapositive ou sur une disposition et remplacez‑le dans la collection d’images de la présentation —les mises à jour se propageront à tous les éléments qui utilisent cette ressource.

Un SVG inséré peut-il être converti en formes modifiables ?

Oui. Vous pouvez convertir un SVG en un groupe de formes, après quoi chaque partie devient modifiable avec les propriétés standard des formes.

Comment définir une image comme arrière‑plan pour plusieurs diapositives en même temps ?

Attribuez l’image comme arrière‑plan sur le masque de diapositive ou la disposition correspondante —toutes les diapositives utilisant ce masque/disposition hériteront de l’arrière‑plan.

Comment empêcher la présentation de “gonfler” en taille à cause de nombreuses images ?

Réutilisez une même ressource d’image au lieu de la dupliquer, choisissez des résolutions raisonnables, appliquez une compression lors de l’enregistrement et conservez les graphiques répétés sur le masque lorsque cela est approprié.

Visionneuse de présentation