JavaScript를 사용한 프레젠테이션의 그림 프레임 관리
소개
그림 프레임은 이미지를 포함하는 도형으로, 프레임 안에 그림이 들어간 형태와 같습니다.
그림 프레임을 통해 슬라이드에 이미지를 추가할 수 있습니다. 이렇게 하면 그림 프레임을 서식 지정함으로써 이미지도 서식 지정할 수 있습니다.
그림 프레임 만들기
- Presentation 클래스의 인스턴스를 생성합니다.
- 인덱스를 통해 슬라이드의 참조를 가져옵니다.
- 프레젠테이션 개체와 연결된 ImagesCollection에 이미지를 추가하여
PPImage객체를 만듭니다. - 이미지의 너비와 높이를 지정합니다.
- 해당 슬라이드와 연결된 shape 객체가 제공하는
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 이미지 추출
프레젠테이션에 PictureFrame 도형 안에 SVG 그래픽이 포함된 경우, Aspose.Slides for Node.js via Java를 사용하여 원본 벡터 이미지를 완전한 품질로 가져올 수 있습니다. 슬라이드의 shape 컬렉션을 순회하면서 각 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를 사용하면 이미지에 적용된 밝기와 대비 효과를 가져올 수 있습니다. Luminance 클래스가 이 이미지 변환 효과를 나타냅니다.
다음 JavaScript 코드는 그림 프레임에서 밝기와 대비 설정을 가져오는 방법을 보여줍니다:
const presentation = new aspose.slides.Presentation("sample.pptx");
try {
const slide = presentation.getSlides().get_Item(0);
const shape = slide.getShapes().get_Item(0);
const pictureFrame = shape;
const imageTransform = pictureFrame.getPictureFormat().getPicture().getImageTransform();
for (let i = 0; i < imageTransform.size(); i++) {
const effect = imageTransform.get_Item(i);
if (java.instanceOf(effect, "com.aspose.slides.Luminance")) {
const luminance = effect.getEffective();
const brightness = luminance.getBrightness();
const contrast = luminance.getContrast();
console.log("Brightness: " + brightness);
console.log("Contrast: " + contrast);
}
}
} finally {
presentation.dispose();
}
그림 프레임 서식 지정
Aspose.Slides는 그림 프레임에 적용할 수 있는 다양한 서식 옵션을 제공합니다. 이러한 옵션을 사용하면 특정 요구 사항에 맞게 그림 프레임을 변경할 수 있습니다.
- Presentation 클래스의 인스턴스를 생성합니다.
- 인덱스를 통해 슬라이드의 참조를 가져옵니다.
- 프레젠테이션 개체와 연결된 ImagesCollection에 이미지를 추가하여 PPImage 객체를 만듭니다.
- 이미지의 너비와 높이를 지정합니다.
- 해당 슬라이드의 Shapes 객체가 제공하는 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")));
// 그림과 동일한 높이와 너비로 그림 프레임을 추가합니다
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();
}
}
Tip
Aspose는 최근에 무료 Collage Maker를 출시했습니다. JPG/JPEG(merge JPG/JPEG) 또는 PNG 이미지를 병합하거나(create grids from photos) 사진으로 그리드를 만들고 싶을 때 이 서비스를 활용할 수 있습니다.이미지를 링크로 추가하기
프레젠테이션 파일 크기를 줄이기 위해 이미지를 직접 삽입하는 대신 링크를 통해 이미지(또는 비디오)를 추가할 수 있습니다. 이 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();
}
}
// 슬라이드에 PictureFrame을 추가합니다
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);
// 첫 번째 슬라이드에서 PictureFrame을 가져옵니다
var picFrame = slide.getShapes().get_Item(0);
// PictureFrame 이미지의 잘린 영역을 삭제하고 잘린 이미지를 반환합니다
var croppedImage = picFrame.getPictureFormat().deletePictureCroppedAreas();
// 결과를 저장합니다
presentation.save("PictureFrameDeleteCroppedAreas.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
if (presentation != null) {
presentation.dispose();
}
}
NOTE
deletePictureCroppedAreas() 메서드는 잘린 이미지를 프레젠테이션 이미지 컬렉션에 추가합니다. 이미지가 처리된 PictureFrame에만 사용된 경우, 이 설정을 통해 프레젠테이션 크기를 줄일 수 있습니다. 그렇지 않으면 결과 프레젠테이션의 이미지 수가 증가합니다.
이 메서드는 자르기 작업 중 WMF/EMF 메타파일을 래스터 PNG 이미지로 변환합니다.
이미지 압축
PictureFillFormat.compressImage 메서드를 사용하여 프레젠테이션 내 그림을 압축할 수 있습니다.
이 메서드는 도형 크기와 지정된 해상도를 기준으로 이미지 크기를 줄이며, 필요에 따라 잘린 영역을 삭제할 옵션을 제공합니다.
PowerPoint의 그림 서식 → 그림 압축 → 해상도 기능과 유사하게 그림의 크기와 해상도를 조정합니다.
다음 JavaScript 예제는 목표 해상도를 지정하고 선택적으로 잘린 영역을 제거하여 프레젠테이션의 이미지를 압축하는 방법을 보여줍니다:
const presentation = new aspose.slides.Presentation("demo.pptx");
try {
const slide = presentation.getSlides().get_Item(0);
const pictureFrame = slide.getShapes().get_Item(0);
// 이미지을 목표 해상도 150 DPI(웹 해상도)로 압축하고 잘린 영역을 제거합니다.
const result = pictureFrame.getPictureFormat().compressImage(true, aspose.slides.PicturesCompression.Dpi150);
// 압축 결과를 확인합니다.
if (result) {
console.log("Image successfully compressed.");
} else {
console.log("Image compression failed or no changes were necessary.");
}
presentation.save("CompressedImage.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
또는 다른 사전 정의 DPI 값을 사용하여:
const presentation = new aspose.slides.Presentation("demo.pptx");
try {
const slide = presentation.getSlides().get_Item(0);
const pictureFrame = slide.getShapes().get_Item(0);
// 이미지를 96 DPI(이메일 해상도)로 압축하고, 잘린 영역을 제거합니다.
pictureFrame.getPictureFormat().compressImage(true, aspose.slides.PicturesCompression.Dpi96);
presentation.save("CompressedImage.pptx", aspose.slides.SaveFormat.Pptx);
} finally {
presentation.dispose();
}
NOTE
이 메서드는 도형 크기와 제공된 DPI를 기준으로 이미지를 낮은 해상도로 변환합니다. 파일 크기를 최적화하기 위해 잘린 영역을 삭제할 수도 있습니다.이미지가 메타파일(WMF/EMF)이나 SVG인 경우 압축이 적용되지 않습니다. 또한 JPEG 품질은 해상도에 따라 유지되거나 약간 낮아지며, 이는 PowerPoint가 고해상도 JPEG를 처리하는 방식과 유사합니다.
종횡비 고정
이미지를 포함한 도형이 이미지 크기를 변경한 후에도 종횡비를 유지하도록 하려면 setAspectRatioLocked 메서드를 사용해 Lock Aspect Ratio 설정을 적용할 수 있습니다.
다음 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);
// 크기 조정 시 종횡비를 유지하도록 shape을 설정합니다
pictureFrame.getPictureFrameLock().setAspectRatioLocked(true);
} catch (e) {console.log(e);
} finally {
if (pres != null) {
pres.dispose();
}
}
NOTE
이 Lock Aspect Ratio 설정은 도형의 종횡비만 유지하고, 도형이 포함하는 이미지 자체의 종횡비는 영향을 받지 않습니다.StretchOff 속성 사용
PictureFillFormat 클래스의 setStretchOffsetLeft, setStretchOffsetTop, setStretchOffsetRight 및 setStretchOffsetBottom 메서드를 사용하면 채우기 사각형을 지정할 수 있습니다.
이미지에 대한 스트레칭이 지정되면 소스 사각형이 지정된 채우기 사각형에 맞게 확대/축소됩니다. 채우기 사각형의 각 가장자리는 도형 경계 상자의 해당 가장자리로부터 백분율 오프셋으로 정의됩니다. 양수 백분율은 안쪽 여백을, 음수 백분율은 외부 여백을 나타냅니다.
- Presentation 클래스의 인스턴스를 생성합니다.
- 인덱스를 통해 슬라이드의 참조를 가져옵니다.
AutoShape사각형을 추가합니다.- 이미지를 생성합니다.
- 도형의 채우기 유형을 설정합니다.
- 도형의 그림 채우기 모드를 설정합니다.
- 도형을 채울 이미지를 추가합니다.
- 도형 경계 상자의 해당 가장자리로부터 이미지 오프셋을 지정합니다.
- 수정된 프레젠테이션을 PPTX 파일로 저장합니다.
다음 JavaScript 코드는 StretchOff 속성을 사용하는 과정을 시연합니다:
// PPTX 파일을 나타내는 Presentation 클래스를 인스턴스화합니다
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();
}
}
// Rectangle으로 설정된 AutoShape를 추가합니다
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();
}
}
FAQ
PictureFrame에서 지원되는 이미지 형식은 어떻게 확인하나요?
Aspose.Slides는 래스터 이미지(PNG, JPEG, BMP, GIF 등)와 벡터 이미지(예: SVG)를 PictureFrame에 할당된 이미지 객체를 통해 지원합니다. 지원되는 형식 목록은 슬라이드 및 이미지 변환 엔진의 기능과 일반적으로 겹칩니다.
수십 개의 대용량 이미지를 추가하면 PPTX 파일 크기와 성능에 어떤 영향을 미치나요?
대용량 이미지를 삽입하면 파일 크기와 메모리 사용량이 증가합니다. 이미지를 링크로 추가하면 프레젠테이션 크기를 줄일 수 있지만 외부 파일이 계속 접근 가능해야 합니다. Aspose.Slides는 파일 크기를 줄이기 위해 이미지 링크 추가 기능을 제공합니다.
이미지 객체를 실수로 이동/크기 변경되는 것을 어떻게 방지하나요?
PictureFrame에 대해 shape locks를 사용하십시오(예: 이동이나 크기 변경 비활성화). 이 잠금 메커니즘은 PictureFrame을 포함한 다양한 도형 유형에서 지원됩니다.
SVG 벡터 정확도가 PDF/이미지로 내보낼 때 유지되나요?
Aspose.Slides는 PictureFrame에서 SVG를 원본 벡터로 추출할 수 있게 합니다. PDF로 내보내기 또는 래스터 형식으로 내보내기 시, 내보내기 설정에 따라 결과가 래스터화될 수 있습니다; 원본 SVG가 벡터로 저장된다는 사실은 추출 동작을 통해 확인할 수 있습니다.