إدارة إطارات الصور في العروض التقديمية باستخدام JavaScript

إطار الصورة هو شكل يحتوي على صورة—إنه يشبه الصورة داخل إطار.

يمكنك إضافة صورة إلى الشريحة عبر إطار صورة. بهذه الطريقة، يمكنك تنسيق الصورة عن طريق تنسيق إطار الصورة.

نصيحة

توفر Aspose محولات مجانية—JPEG إلى PowerPoint وPNG إلى PowerPoint—تمكن الأشخاص من إنشاء عروض تقديمية بسرعة من الصور.

إنشاء إطار صورة

إنشاء مثيل من الفئة Presentation.
الحصول على مرجع الشريحة عبر فهرسها.
إنشاء كائن PPImage بإضافة صورة إلى ImagesCollection المرتبطة بكائن العرض التقديمي الذي سيُستخدم لملء الشكل.
تحديد عرض وارتفاع الصورة.
إنشاء PictureFrame بناءً على عرض وارتفاع الصورة عبر طريقة addPictureFrame التي تُعرضها كائن الشكل المرتبط بالشريحة المرجعية.
إضافة إطار صورة (يحتوي على الصورة) إلى الشريحة.
كتابة العرض التقديمي المعدل كملف PPTX.

يظهر لك هذا الكود JavaScript كيفية إنشاء إطار صورة:

// ينشئ كائنًا من الفئة Presentation التي تمثل ملف PPTX
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.
الحصول على مرجع الشريحة عبر فهرسها.
إضافة صورة إلى مجموعة صور العرض التقديمي.
إنشاء كائن PPImage بإضافة صورة إلى ImagesCollection المرتبطة بكائن العرض التقديمي الذي سيُستخدم لملء الشكل.
تحديد العرض والارتفاع النسبيين للصورة في إطار الصورة.
كتابة العرض التقديمي المعدل كملف PPTX.

يظهر لك هذا الكود JavaScript كيفية إنشاء إطار صورة بمقياس نسبي:

// إنشاء فئة Presentation التي تمثل ملف PPTX
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.
الحصول على مرجع الشريحة عبر فهرسها.
إنشاء كائن PPImage بإضافة صورة إلى ImagesCollection المرتبطة بكائن العرض التقديمي الذي سيُستخدم لملء الشكل.
تحديد عرض وارتفاع الصورة.
إنشاء PictureFrame بناءً على عرض وارتفاع الصورة عبر طريقة addPictureFrame التي تُعرضها كائن Shapes المرتبط بالشريحة المرجعية.
إضافة إطار الصورة (الذي يحتوي على الصورة) إلى الشريحة.
ضبط لون خط إطار الصورة.
ضبط عرض خط إطار الصورة.
تدوير إطار الصورة بإعطائه قيمة موجبة أو سالبة.
- القيمة الموجبة تدور الصورة باتجاه عقارب الساعة.
- القيمة السالبة تدور الصورة عكس اتجاه عقارب الساعة.
إضافة إطار الصورة (الذي يحتوي على الصورة) إلى الشريحة مرة أخرى.
كتابة العرض التقديمي المعدل كملف PPTX.

يظهر لك هذا الكود JavaScript عملية تنسيق إطار الصورة:

// ينشئ كائنًا من فئة Presentation التي تمثل ملف PPTX
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);
    // يطبق بعض التنسيقات على PictureFrameEx
    pf.getLineFormat().getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Solid));
    pf.getLineFormat().getFillFormat().getSolidFillColor().setColor(java.getStaticFieldValue("java.awt.Color", "BLUE"));
    pf.getLineFormat().setWidth(20);
    pf.setRotation(45);
    // يكتب ملف PPTX إلى القرص
    pres.save("RectPicFrame.pptx", aspose.slides.SaveFormat.Pptx);
} catch (e) {console.log(e);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

نصيحة

طورت Aspose مؤخرًا أداة Collage Maker مجانية. إذا احتجت إلى دمج صور JPG/JPEG أو PNG، أو إنشاء شبكات من الصور، يمكنك استخدام هذه الخدمة.

إضافة صورة كرابط

لتقليل حجم العروض التقديمية الكبيرة، يمكنك إضافة الصور (أو الفيديوهات) عبر روابط بدلاً من تضمين الملفات مباشرةً في العروض. يوضح لك هذا الكود JavaScript كيفية إضافة صورة وفيديو إلى عنصر نائب:

var presentation = new aspose.slides.Presentation("input.pptx");
try {
    var shapesToRemove = java.newInstanceSync("java.util.ArrayList");
    var shapesCount = presentation.getSlides().get_Item(0).getShapes().size();
    for (var i = 0; i < shapesCount; i++) {
        var autoShape = presentation.getSlides().get_Item(0).getShapes().get_Item(i);
        if (autoShape.getPlaceholder() == null) {
            continue;
        }
        switch (autoShape.getPlaceholder().getType()) {
            case aspose.slides.PlaceholderType.Picture :
                var pictureFrame = presentation.getSlides().get_Item(0).getShapes().addPictureFrame(aspose.slides.ShapeType.Rectangle, autoShape.getX(), autoShape.getY(), autoShape.getWidth(), autoShape.getHeight(), null);
                pictureFrame.getPictureFormat().getPicture().setLinkPathLong("https://upload.wikimedia.org/wikipedia/commons/3/3a/I.M_at_Old_School_Public_Broadcasting_in_October_2016_02.jpg");
                shapesToRemove.add(autoShape);
                break;
            case aspose.slides.PlaceholderType.Media :
                var videoFrame = presentation.getSlides().get_Item(0).getShapes().addVideoFrame(autoShape.getX(), autoShape.getY(), autoShape.getWidth(), autoShape.getHeight(), "");
                videoFrame.getPictureFormat().getPicture().setLinkPathLong("https://upload.wikimedia.org/wikipedia/commons/3/3a/I.M_at_Old_School_Public_Broadcasting_in_October_2016_02.jpg");
                videoFrame.setLinkPathLong("https://youtu.be/t_1LYZ102RA");
                shapesToRemove.add(autoShape);
                break;
        }
    }
    for (var i = 0; i < shapesToRemove.length; i++) {
        var shape = shapesToRemove.get_Item(i);
        presentation.getSlides().get_Item(0).getShapes().remove(shape);
    }
    presentation.save("output.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (presentation != null) {
        presentation.dispose();
    }
}

اقتصاص الصورة

يظهر لك هذا الكود JavaScript كيفية اقتصاص صورة موجودة على شريحة:

var pres = new aspose.slides.Presentation();
// إنشاء كائن صورة جديد
try {
    var picture;
    var image = aspose.slides.Images.fromFile(imagePath);
    try {
        picture = pres.getImages().addImage(image);
    } finally {
        if (image != null) {
            image.dispose();
        }
    }
    // إضافة إطار صورة إلى شريحة
    var picFrame = pres.getSlides().get_Item(0).getShapes().addPictureFrame(aspose.slides.ShapeType.Rectangle, 100, 100, 420, 250, picture);
    // اقتصاص الصورة (قيم النسبة المئوية)
    picFrame.getPictureFormat().setCropLeft(23.6);
    picFrame.getPictureFormat().setCropRight(21.5);
    picFrame.getPictureFormat().setCropTop(3);
    picFrame.getPictureFormat().setCropBottom(31);
    // حفظ النتيجة
    pres.save(outPptxFile, aspose.slides.SaveFormat.Pptx);
} catch (e) {console.log(e);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

حذف المناطق المقصوصة من الإطار

إذا أردت حذف المناطق المقصوصة من صورة موجودة في إطار، يمكنك استخدام طريقة deletePictureCroppedAreas() . تُعيد هذه الطريقة الصورة المقصوصة أو الصورة الأصلية إذا لم يكن الاقتصاص ضروريًا.

يظهر لك هذا الكود JavaScript العملية:

var presentation = new aspose.slides.Presentation("PictureFrameCrop.pptx");
try {
    var slide = presentation.getSlides().get_Item(0);
    // يحصل على إطار الصورة من الشريحة الأولى
    var picFrame = slide.getShapes().get_Item(0);
    // يحذف المناطق المقصوصة من صورة إطار الصورة ويعيد الصورة المقصوصة
    var croppedImage = picFrame.getPictureFormat().deletePictureCroppedAreas();
    // يحفظ النتيجة
    presentation.save("PictureFrameDeleteCroppedAreas.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
    if (presentation != null) {
        presentation.dispose();
    }
}

ملاحظة

طريقة deletePictureCroppedAreas() تضيف الصورة المقصوصة إلى مجموعة صور العرض التقديمي. إذا استُخدمت الصورة فقط في PictureFrame المعالجة، يمكن لهذا الإعداد تقليل حجم العرض التقديمي. وإلا، سيزداد عدد الصور في العرض الناتج.

تحول هذه الطريقة ملفات WMF/EMF إلى صورة PNG نقطية أثناء عملية الاقتصاص.

قفل نسبة الأبعاد

إذا رغبت في أن يحتفظ الشكل الذي يحتوي على صورة بنسبة أبعادها حتى بعد تعديل أبعاد الصورة، يمكنك استخدام طريقة setAspectRatioLocked لضبط إعداد قفل نسبة الأبعاد.

يظهر لك هذا الكود JavaScript كيفية قفل نسبة أبعاد الشكل:

var pres = new aspose.slides.Presentation("pres.pptx");
try {
    var layout = pres.getLayoutSlides().getByType(aspose.slides.SlideLayoutType.Custom);
    var emptySlide = pres.getSlides().addEmptySlide(layout);
    var picture;
    var image = aspose.slides.Images.fromFile("image.png");
    try {
        picture = pres.getImages().addImage(image);
    } finally {
        if (image != null) {
            image.dispose();
        }
    }
    var pictureFrame = emptySlide.getShapes().addPictureFrame(aspose.slides.ShapeType.Rectangle, 50, 150, presImage.getWidth(), presImage.getHeight(), picture);
    // ضبط الشكل للحفاظ على نسبة الأبعاد عند تغيير الحجم
    pictureFrame.getPictureFrameLock().setAspectRatioLocked(true);
} catch (e) {console.log(e);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

ملاحظة

إعداد قفل نسبة الأبعاد يحافظ فقط على نسبة أبعاد الشكل وليس الصورة التي يحتويها.

استخدام خاصية StretchOff

باستخدام الطرق setStretchOffsetLeft، setStretchOffsetTop، setStretchOffsetRight وsetStretchOffsetBottom من فئة PictureFillFormat، يمكنك تحديد مستطيل ملء.

عند تحديد تمدد للصورة، يتم تحجيم المستطيل المصدر ليتناسب مع مستطيل الملء المحدد. كل حافة من حواف مستطيل الملء تُحدَّد بنسبة إزاحة من الحافة المقابلة لمربع تحديد الشكل. النسبة الموجبة تمثل تقليصًا بينما السالبة تمثل توسيعًا.

إنشاء مثيل من فئة Presentation.
الحصول على مرجع الشريحة عبر فهرسها.
إضافة مستطيل AutoShape.
إنشاء صورة.
ضبط نوع ملء الشكل.
ضبط وضع ملء الصورة للشكل.
إضافة صورة للملء إلى الشكل.
تحديد إزاحات الصورة من الحافة المقابلة لمربع تحديد الشكل.
كتابة العرض التقديمي المعدل كملف PPTX.

يظهر لك هذا الكود JavaScript عملية استخدام خاصية StretchOff:

// ينشئ كائنًا من الفئة Presentation التي تمثل ملف PPTX
var pres = new aspose.slides.Presentation();
try {
    // يحصل على الشريحة الأولى
    var slide = pres.getSlides().get_Item(0);
    // ينشئ كائنًا من الفئة ImageEx
    var picture;
    var image = aspose.slides.Images.fromFile("aspose-logo.jpg");
    try {
        picture = pres.getImages().addImage(image);
    } finally {
        if (image != null) {
            image.dispose();
        }
    }
    // يضيف AutoShape من النوع Rectangle
    var aShape = slide.getShapes().addAutoShape(aspose.slides.ShapeType.Rectangle, 100, 100, 300, 300);
    // يحدد نوع تعبئة الشكل
    aShape.getFillFormat().setFillType(java.newByte(aspose.slides.FillType.Picture));
    // يحدد وضع تعبئة الصورة للشكل
    aShape.getFillFormat().getPictureFillFormat().setPictureFillMode(aspose.slides.PictureFillMode.Stretch);
    // يعيّن الصورة لتعبئة الشكل
    aShape.getFillFormat().getPictureFillFormat().getPicture().setImage(picture);
    // يحدد إزاحات الصورة من الحافة المقابلة لمربع حد الشكل
    aShape.getFillFormat().getPictureFillFormat().setStretchOffsetLeft(25);
    aShape.getFillFormat().getPictureFillFormat().setStretchOffsetRight(25);
    aShape.getFillFormat().getPictureFillFormat().setStretchOffsetTop(-20);
    aShape.getFillFormat().getPictureFillFormat().setStretchOffsetBottom(-10);
    // يكتب ملف PPTX إلى القرص
    pres.save("StretchOffsetLeftForPictureFrame_out.pptx", aspose.slides.SaveFormat.Pptx);
} catch (e) {console.log(e);
} finally {
    if (pres != null) {
        pres.dispose();
    }
}

الأسئلة الشائعة

كيف يمكنني معرفة صيغ الصور المدعومة لإطار الصورة؟

يدعم Aspose.Slides كلًا من الصور النقطية (PNG، JPEG، BMP، GIF، إلخ) والصور المتجهة (مثل SVG) عبر كائن الصورة المعيّن إلى PictureFrame. قائمة الصيغ المدعومة تتقاطع عمومًا مع قدرات محرك تحويل الشرائح والصور.

كيف سيؤثر إضافة العشرات من الصور الكبيرة على حجم PPTX والأداء؟

تزيد الصور المضمنة الكبيرة من حجم الملف واستهلاك الذاكرة؛ ربط الصور يساعد في خفض حجم العرض التقديمي لكنه يتطلب بقاء الملفات الخارجية متاحة. يوفر Aspose.Slides إمكانية إضافة الصور عبر روابط لتقليل حجم الملف.

كيف يمكنني قفل كائن الصورة لمنع تحريكه/تغييره عن طريق الخطأ؟

استخدم قفل الأشكال لـ PictureFrame (مثل تعطيل النقل أو التحجيم). يدعم آلية القفل أنواعًا مختلفة من الأشكال بما فيها PictureFrame.

هل يتم الحفاظ على دقة الصورة المتجهة SVG عند تصدير العرض التقديمي إلى PDF/صور؟

يسمح Aspose.Slides باستخراج SVG من PictureFrame كمتجه أصلي. عند التصدير إلى PDF أو الصيغ النقطية، قد يتم تحويله إلى نقطية حسب إعدادات التصدير؛ لكن يبقى الـ SVG الأصلي محفوظًا كمتجه كما يؤكد سلوك الاستخراج.

عارض العروض التقديمية