안녕하세요. 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창에서 확대 축소 기능을 사용할 수 있습니다.


투명화 이미지로 사용하시면 투명화 된 그대로 병합됩니다.


혹시나 궁금하신 점 있으시거나 제가 잘못적은 부분이 있다면 댓글 부탁드립니다.


감사합니다.



WRITTEN BY
IT김군
S/W 개발자 김군의 메모장

,