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>
결과화면은 다음과 같다.
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' 카테고리의 다른 글
| 안드로이드 jPCT-AE로 (근사) 직교투영(Orthogonal Projection) 실현하기 (0) | 2012/07/04 |
|---|---|
| 안드로이드 jPCT-AE를 활용해 간단한 기하구조를 만들어 Object3D를 다뤄보기 (0) | 2012/06/29 |
| 안드로이드 jPCT-AE로 OpenGL ES 3D 데모 개발 (0) | 2012/06/27 |
| 안드로이드 프로젝트 생성시 tools/lib/proguard.cfg (no such file or directory) 해결법 (0) | 2012/06/27 |
| HTML5 Canvas base64 데이타를 Android Bitmap으로 사용하기 (0) | 2012/06/26 |
| 안드로이드 개발시 ADB가 실행중 "Please 'adb uninstall ~' in a shell" 에러 메시지가 뜰 경우 처리 (0) | 2012/05/01 |
Trackback 주소: http://blog.jidolstar.com/trackback/822
