JavaScript を使用してプレゼンテーションの画像フレームを管理する

はじめに

画像フレームは画像を含むシェイプで、フレーム内の画像のようなものです。

画像フレームを介してスライドに画像を追加できます。この方法で、画像を画像フレームの書式設定することで画像自体をフォーマットできます。

ヒント

Aspose は無料コンバータ―を提供しています—JPEG to PowerPoint と PNG to PowerPoint — これにより画像からプレゼンテーションをすばやく作成できます。

画像フレームの作成

Presentation クラスのインスタンスを作成します。
インデックスを使用してスライドの参照を取得します。
プレゼンテーションオブジェクトに関連付けられた ImagesCollection に画像を追加して PPImage オブジェクトを作成し、シェイプの塗りに使用します。
画像の幅と高さを指定します。
参照したスライドに関連付けられたシェイプオブジェクトが提供する addPictureFrame メソッドを使用して、画像の幅と高さに基づく PictureFrame を作成します。
画像フレーム（画像を含む）をスライドに追加します。
変更したプレゼンテーションを PPTX ファイルとして書き込みます。

この JavaScript コードは画像フレームの作成方法を示しています:

// PPTX ファイルを表す Presentation クラスのインスタンスを作成する
var pres = new aspose.slides.Presentation();
try {
    // 最初のスライドを取得する
    var sld = pres.getSlides().get_Item(0);
    // Image クラスのインスタンスを作成する
    var imgx = pres.getImages().addImage(java.newInstanceSync("java.io.FileInputStream", java.newInstanceSync("java.io.File", "asp1.jpg")));
    // 画像と同等の高さと幅で画像フレームを追加する
    sld.getShapes().addPictureFrame(aspose.slides.ShapeType.Rectangle, 50, 150, imgx.getWidth(), imgx.getHeight(), imgx);
    // PPTX ファイルをディスクに書き込む
    pres.save("RectPicFrame.pptx", aspose.slides.SaveFormat.Pptx);
} catch (e) {console.log(e);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

画像フレームを使用すると、画像に基づいたプレゼンテーションスライドをすばやく作成できます。画像フレームと Aspose.Slides の保存オプションを組み合わせることで、画像の入力/出力操作を操作し、形式を変換できます。

相対スケールで画像フレームを作成する

画像の相対スケーリングを変更することで、より複雑な画像フレームを作成できます。

Presentation クラスのインスタンスを作成します。
インデックスを使用してスライドの参照を取得します。
プレゼンテーションの画像コレクションに画像を追加します。
プレゼンテーションオブジェクトに関連付けられた ImagesCollection に画像を追加して PPImage オブジェクトを作成し、シェイプの塗りに使用します。
画像フレーム内で画像の相対幅と高さを指定します。
変更したプレゼンテーションを PPTX ファイルとして書き込みます。

この JavaScript コードは相対スケールで画像フレームを作成する方法を示しています:

// PPTX を表す Presentation クラスのインスタンスを作成する
var pres = new aspose.slides.Presentation();
try {
    // 最初のスライドを取得する
    var sld = pres.getSlides().get_Item(0);
    // Image クラスのインスタンスを作成する
    var imgx = pres.getImages().addImage(java.newInstanceSync("java.io.FileInputStream", java.newInstanceSync("java.io.File", "asp1.jpg")));
    // 画像と同等の高さと幅で画像フレームを追加する
    var pf = sld.getShapes().addPictureFrame(aspose.slides.ShapeType.Rectangle, 50, 150, imgx.getWidth(), imgx.getHeight(), imgx);
    // 相対スケールの幅と高さを設定する
    pf.setRelativeScaleHeight(0.8);
    pf.setRelativeScaleWidth(1.35);
    // PPTX ファイルをディスクに書き込む
    pres.save("RectPicFrame.pptx", aspose.slides.SaveFormat.Pptx);
} catch (e) {console.log(e);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

画像フレームからラスタ画像を抽出する

PictureFrame オブジェクトからラスタ画像を抽出し、PNG、JPG などの形式で保存できます。以下のコード例は、ドキュメント「sample.pptx」から画像を抽出し、PNG 形式で保存する方法を示しています。

var presentation = new aspose.slides.Presentation("sample.pptx");
try {
    var firstSlide = presentation.getSlides().get_Item(0);
    var firstShape = firstSlide.getShapes().get_Item(0);
    if (java.instanceOf(firstShape, "com.aspose.slides.IPictureFrame")) {
        var pictureFrame = firstShape;
        try {
            var slideImage = pictureFrame.getPictureFormat().getPicture().getImage().getImage();
            slideImage.save("slide_1_shape_1.png", aspose.slides.ImageFormat.Png);
        } finally {
            if (slideImage != null) {
                slideImage.dispose();
            }
        }
    }
} catch (e) {console.log(e);
} finally {
    presentation.dispose();
}

画像フレームから SVG 画像を抽出する

プレゼンテーションに SVG グラフィックが PictureFrame シェイプ内に配置されている場合、Aspose.Slides for Node.js via Java を使用して元のベクター画像をフルフィデリティで取得できます。スライドのシェイプコレクションを走査し、各 PictureFrame を特定し、基になる PPImage が SVG コンテンツを保持しているか確認した上で、画像をディスクまたはストリームにネイティブ SVG 形式で保存します。

以下のコード例は、画像フレームから SVG 画像を抽出する方法を示しています:

var presentation = new aspose.slides.Presentation("sample.pptx");

try {
    var slide = presentation.getSlides().get_Item(0);
    var shape = slide.getShapes().get_Item(0);

    if (java.instanceOf(shape, "com.aspose.slides.IPictureFrame")) {
        const svgImage = shape.getPictureFormat().getPicture().getImage().getSvgImage();

        if (svgImage) {
            fs.writeFileSync("output.svg", svgImage.getSvgData());
        }
    }
} catch (e) {
    console.log(e);
} finally {
    presentation.dispose();
}

画像の透明度を取得する

Aspose.Slides は画像に適用された透明度効果を取得できます。この JavaScript コードはその操作を示しています:

var presentation = new aspose.slides.Presentation("Test.pptx");
var pictureFrame = presentation.getSlides().get_Item(0).getShapes().get_Item(0);
var imageTransform = pictureFrame.getPictureFormat().getPicture().getImageTransform();
for (var i = 0; i < imageTransform.size(); i++) {
    var effect = imageTransform.get_Item(i);
    if (java.instanceOf(effect, "com.aspose.slides.IAlphaModulateFixed")) {
        var alphaModulateFixed = effect;
        var transparencyValue = 100 - alphaModulateFixed.getAmount();
        console.log("Picture transparency: " + transparencyValue);
    }
}

画像フレームの書式設定

Aspose.Slides は画像フレームに適用できる多くの書式設定オプションを提供します。これらのオプションを使用して、画像フレームを特定の要件に合わせて変更できます。

Presentation クラスのインスタンスを作成します。
インデックスを使用してスライドの参照を取得します。
プレゼンテーションオブジェクトに関連付けられた ImagesCollection に画像を追加して PPImage オブジェクトを作成し、シェイプの塗りに使用します。
画像の幅と高さを指定します

プレゼンテーションビューア