Javascript Canvas 이미지 비율로 복사

Posted on Edited on In , Word count in article: 225 Reading time ≈ 1 mins.

canvas 에 이미지를 좌/우로 맞춰서 복사하는 방법을 정리해놓습니다.

Canvas

javascript 에서 그림 그릴때 사용하는 기능입니다
CANVAS 기본사용법

1
<canvas id="tutorial" width="150" height="150"></canvas>

Canvas 사용

canvas 를 만들고 2d context 를 만들어서 context 에 image 를 그리는 방식으로 사용합니다.

1
2
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

실사용예제

bannermaker 에서는 다음과 같이 사용했습니다.
canvas 를 만들고 canvas 사이즈를 설정하고
사진 이미지가 로딩되면 context 에 해당 이미지를 복사해 줍니다.
h 와 v 의 선택에 따라서 전체 사진을 canvas 에 그릴지
아니면 사진을 canvas 좌/우/위/아래를 기준으로 그릴지를 맞춰주는 방식으로
사진의 일부분만 사용할 수도 있게 했습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
const setBannerImage = (h = "center", v = "middle") => {
  var canvas = document.getElementById("my-canvas");
  var ctx = canvas.getContext("2d");
  const canvasw = document.getElementById("banner_width").value;
  const canvash = document.getElementById("banner_height").value;
  const sourceImg = document.getElementById("my-image");

  canvas.width = canvasw;
  canvas.height = canvash;
  const hvswitch = (value, wh) =>
    ({
      left: 0,
      center: (wh - canvas.width) / 2,
      right: wh - canvas.width,
      top: 0,
      middle: (wh - canvas.height) / 2,
      bottom: wh - canvas.height,
    }[value]);

  sourceImg.onload = () => {
    if (h === "full") {
      ctx.drawImage(sourceImg, 0, 0, canvas.width, canvas.height);
    } else {
      ctx.drawImage(
        sourceImg,
        hvswitch(h, sourceImg.width),
        hvswitch(v, sourceImg.height),
        canvas.width,
        canvas.height,
        0,
        0,
        canvas.width,
        canvas.height
      );
    }
    var imgbase64 = canvas.toDataURL();
    banner.style.backgroundImage = `url('${imgbase64}')`;
  };

  if (sourceImg.src && sourceImg) {
    //full image
    if (h === "full") {
      ctx.drawImage(sourceImg, 0, 0, canvas.width, canvas.height);
    } else {
      ctx.drawImage(
        sourceImg,
        hvswitch(h, sourceImg.width),
        hvswitch(v, sourceImg.height),
        canvas.width,
        canvas.height,
        0,
        0,
        canvas.width,
        canvas.height
      );
    }
    var imgbase64 = canvas.toDataURL();
    banner.style.backgroundImage = `url('${imgbase64}')`;
  }
};