サンプル

canvas

説明

canvas要素からデータURLスキームを取得することができ、 そのデータURLスキームからBASE64に変換作成できる。

html

	<canvas id="canvas1"></canvas>

javascript

	// canvas要素から描画コンテキストを取得する
	var canvas = document.getElementById('canvas1');
	var ctx = canvas.getContext('2d');
	
	// canvasへ適当に描画する
	ctx.beginPath();
	ctx.moveTo(10,150);
	ctx.lineTo(70,10);
	ctx.lineTo(150,150);
	ctx.lineTo(10,40);
	ctx.lineTo(140,50);
	ctx.closePath();
	ctx.stroke();
	
	// canvasからデータURLスキームを経由し、BASE64を取得する
	var mime_type = "jpeg/image";
	var data_url = canvas.toDataURL(mime_type);// canvasからデータURLスキームを取得する。
	var base64 = window.btoa(data_url);// データURLスキームからBASE64を作成する。
	console.log(base64);
	

---

目次へ戻る