안녕하세요. IT김군입니다.
오늘은 Ionic3에서 이미지 2개를 하나로 합하여 확대, 축소하는 방법까지 알아보도록 하겠습니다.
이 방법을 찾느라 한 일주일은 삽질한 것 같네요.... 처음엔 이미지가 안뜨고 나중에는 이미지를 띄웠더니 Android에서는 작동이 안되고
또 Android를 맞췄더니 IOS가 안되고.......... 그래서 이것저것 삽질하다가 찾은 방법입니다.
우선 image 작업을 하실 페이지 html 파일을 먼저 보겠습니다.
//page.html
<ion-header>
<ion-navbar>
<ion-title>
타이틀명
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<div class="ion-canvas" hidden>
<canvas #canvas id="canvas"></canvas>
</div>
<img src={{this.compositeImage}} #myImage (click)="presentImage(myImage)"/>
</ion-content>
html은 위와 같이 작성하였습니다.
canvas같은 경우는 어차피 두 이미지를 병합한 하나의 이미지를 this.compositeImage에서 보여주려고 일부러 hidden 처리 하였습니다.
그 다음 Zoom In / Zoom out 기능은 ioinc-img-viewer를 사용할 계획이니 터미널에서 추가해줍니다.
$ npm install --save ionic-img-viewer추가했으니 app.module.ts에도 추가해줍니다.
import { IonicImageViewerModule } from 'ionic-img-viewer';
@NgModule({
imports : [
IonicImageViewerModule
]
})
export class AppModule {}그 다음 이 이미지를 사용하실 페이지에 typescript 파일을 코딩해봅시다!
예를 들어 page.ts라고 하겠습니다.
import { Component, ElementRef, ViewChild } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { ImageViewerController } from 'ionic-img-viewer';
export class Page {
@ViewChild('canvas') canvasEl : ElementRef;
private _Canvas : any;
private _Context : any;
private compositeImage;
private image1 : string;
private image2 : string;
private image : any = new Image();
private _image : any = new Image();
private _imageViewerCtrl : ImageViewerController;
constructor(public navCtrl: NavController, private platform : Platform,
private imgViewerCtrl : ImageViewerController) {
this._imageViewerCtrl = imgViewerCtrl;
}
presentImage(myImage){
const imageViewer = this._imageViewerCtrl.create(myImage);
imageViewer.present();
}
ionViewDidLoad(){
this._Canvas = document.createElement('canvas');
this._Canvas.width = (number)canvas width Size;
this._Canvas.height = (number)canvas height Size;
this.platform.ready().then(() => {
if(this._Canvas.getContext){
this._Context = this._Canvas.getContext('2d');
this.showImage();
}
});
}
showImage(){
this.image1 = 'assets/imgs/sky.png';
this.image2 = 'assets/imgs/img.png';
this.image.src = this.image1;
this.image.onload = () => {
this._Context.drawImage(this.image, 0, 0, (number)widthSize, (number)heightSize);
this._image.src = this.image2;
this._image.onload = () => {
this._Context.drawImage(this._image, 347.315, 317.288, 50, 50 );
this.compositeImage = this._Canvas.toDataURL("image/png");
}
};
}
}
platform.ready().then()이나 onload()의 경우는 Android와 IOS 각 플랫폼에서 실행 시 모두 호환되는 최적의 시점을 찾다보니 사용하였습니다.
(number) width Size나 (number) Height Size에는 원하시는 크기의 숫자를 넣으시면 됩니다.
this._Context.drawImage()의 파라미터는 (new Image(), x축 좌표, y축 좌표, 이미지 넓이, 이미지 높이); 입니다.
그래서 저는 테스트용으로
위 두 그림을 합쳐보았습니다.
그래서 아래와 같은 결과물을 얻을 수 있었습니다.
위 스크린샷에서 이미지를 누르면 Plugin API를 통해 이미지만 따로 표시되는 modal창이 발생하며 이 modal창에서 확대 축소 기능을 사용할 수 있습니다.
투명화 이미지로 사용하시면 투명화 된 그대로 병합됩니다.
혹시나 궁금하신 점 있으시거나 제가 잘못적은 부분이 있다면 댓글 부탁드립니다.
감사합니다.
'Ionic 개발 메모장' 카테고리의 다른 글
| Ionic3 Socket.io Client (for Typescript) (0) | 2018.02.02 |
|---|---|
| Ionic background에서 foreground로 넘어올 때 이벤트 (0) | 2018.01.22 |
| Ionic 토글(toggle) 사용하기 (설정) (2) | 2018.01.17 |
| Ionic Framework 뒤로가기 두 번 누를 시 앱 종료 (for Android) (2) | 2018.01.16 |
| Ionic cordova IBeacon Advertise 감도조절 (for Android) (2) | 2018.01.15 |
WRITTEN BY
- IT김군
S/W 개발자 김군의 메모장
