이미지를 URL로 얻기 HTML5



이미지를 URL로 얻기

 

 

캔버스는 그려진 이미지를 URL로 얻을 수 있다.

또, 이처럼 얻어진 URL을 <IMG> 엘리먼트에 넣어 이미지를 출력할수도 있다.

 

이미지를 문자열로 직렬화한다는 것이 중요한 포인트라 말할 수 있다.

데이터를 주고받는 웹 애플리케이션에서 유용하게 사용될 수 있는 기능이 될수 있을것 같다.

(물론 기존에도 다른방식으로 사용하는데에는 문제없었지만, 문자열에 대한 암호화 기능이 추가되었다.)

 

이때 사용하는 메서드는 toDataURL()이다. 프로토타입을 보자.

 

 

      toDataURL()

 

      캔버스의 내용을 data URL 문자열로 불러온다. 인수에는 이미지의 인코딩 방법을 MIME타입으로 정의한다.

      기본적으로 인수를 생략하면 'image/png'로 간주한다.

 

 

예제를 보자.

 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> HTML5 TEST </TITLE>
</HEAD>
<BODY>
 <canvas id="canvas1" width="500" height="500"></canvas>

<SCRIPT LANGUAGE="JavaScript">
<!--
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");

context.fillStyle = "red";
context.fillRect(20, 20, 100, 100);
context.fillStyle = "green";
context.fillRect(50, 50, 100, 100);

alphaRect(context, 0.5, 40, 60, 80, 40);

function alphaRect(context, alpha, x, y, w, h){
 var imageData = context.getImageData(x, y, w, h);

 for(var i = 0; i< imageData.data.length; i++){
  //투명도변경
  if(i % 4 == 3){
   //픽셀조작의 경우는 투명도도 0~255 범위의 값으로 지정
   imageData.data[i] = 255 * alpha;
  }
 }

 //변경된 비트맵을 캔버스에 다시 그림
 context.putImageData(imageData, x, y);

 

 //toDataURL()을 통한 이미지 정보얻기
 //alert(canvas.toDataURL());
 alert(canvas.toDataURL("image/jpeg"));


//-->
</SCRIPT>

</BODY>
</HTML>

 

앞서 봤던 사각형을 그리고, 투명도를 설정했던 예제와 동일한 예제이다.

단지 마지막 부분에서 비트맵을 그린 이후에, 경고창을 띄워 내용을 확인해주는 부분이 추가되었다. (파란색 부분)

 

캔버스에 대한 이미지정보를 문자열로 출력한다.

아래는 결과에 대한 경고창의 일부분이다. (문자열이 꽤 길어 일부만 표시했다.)

 

 

대충 이러한 내용이다.

data : <image mime type>; base64, <이미지 데이터를 base64 문자열로 암호화한 문자열>

 

 

이러한 이미지 등의 데이터는 자신이 속한 도메인내에서만 허용된다.

보안과 관련된 내용으로서, 자세한 내용은 관련서적을 참고하기 바란다.


덧글

댓글 입력 영역


통계 위젯 (화이트)

1522
132
358625

red 210