HTML5 Canvas base64 데이타를 Android Bitmap으로 사용하기

2012/06/26 23:57

HTML5의 Canvas이미지를 가져다가 안드로이드에서 Bitmap으로 사용할 수 있다. (어떤 경우에 있겠지?) 아래 코드는 그걸 실험해 보려고 만든 테스트 코드이다. 일단 HTML5의 Canvas를 사용해 그림을 그린후 canvas.toDataURL().toString()을 사용해 Base64 문자열을 뽑아낸다. 


<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #myCanvas {
        border: 1px solid #9C9898;
      }
    </style>
    <script>
      window.onload = function() {
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");

        // begin custom shape
        context.beginPath();
        context.moveTo(170, 80);
        context.bezierCurveTo(130, 100, 130, 150, 230, 150);
        context.bezierCurveTo(250, 180, 320, 180, 340, 150);
        context.bezierCurveTo(420, 150, 420, 120, 390, 100);
        context.bezierCurveTo(430, 40, 370, 30, 340, 50);
        context.bezierCurveTo(320, 5, 250, 20, 250, 50);
        context.bezierCurveTo(200, 5, 150, 20, 170, 80);

        // complete custom shape
        context.closePath();
        context.lineWidth = 5;
        context.strokeStyle = "blue";
        context.stroke();
		
	document.getElementById("canvasData").innerHTML = canvas.toDataURL().toString();
		
      };

    </script>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <div id="canvasData"></div>
  </body>
</html>


결과화면은 다음과 같다. 



base64 문자열을 복사해서 다음 안드로이드 코드에서 사용해본다.
package com.cookilab.base64bitmap;

import java.io.ByteArrayOutputStream;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Rect;
import android.os.Bundle;
import android.util.Base64;
import android.view.View;

public class TestActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView( new TestView(this) );
    }
    protected class TestView extends View {
        public TestView(Context context) {
            super(context);
        }
        public String encodeTobase64(Bitmap image) {
            Bitmap immagex=image;
            ByteArrayOutputStream baos = new ByteArrayOutputStream();  
            immagex.compress(Bitmap.CompressFormat.JPEG, 100, baos);
            byte[] b = baos.toByteArray();
            String imageEncoded = Base64.encodeToString(b,Base64.DEFAULT);
            return imageEncoded;
        }
        public Bitmap decodeBase64(String input) {
            byte[] decodedByte = Base64.decode(input, 0);
            return BitmapFactory.decodeByteArray(decodedByte, 0, decodedByte.length); 
        }    
        public void onDraw(Canvas canvas){
            String base64 = "iVBORw0KGg............==";
            Bitmap bitmap = decodeBase64(base64);
            canvas.drawBitmap(bitmap, null, new Rect(0, 0, 300, 100), null);
        }
    }   
}




그래서 뭘 하고 싶은거냐?

자바스크립트와 안드로이드간 통신이 가능하므로 이미지도 전송할 수 있다는 것을 보여준 셈이다. 


끝 ^^


글쓴이 : 지돌스타(http://blog.jidolstar.com/822)

저작자 표시 비영리 동일 조건 변경 허락

Android , , , , ,