SYNCERのロゴ
アイキャッチ画像

画像に変換する方法

Canvasを画像に変換してユーザーが保存できるようにするには、2つの方法があります。base64エンコードされたData URIを取得するにはtoDataURL()、Blob(File)を取得するにはtoBlob()を利用しましょう。どちらもコンテキストではなく、canvas要素のメソッドなのでご注意を。

サンプルコード

いずれの方法でも、例えばimg要素のsrc属性に指定すれば画像を表示できます。

Data URI

base64エンコードされたData URIに変換する場合です。文字列なので、サイズが小さければlocalStorageなどにも保存できます。メジャーなブラウザはどれもサポートしています。

// element = <canvas width="200" height="200"></canvas>
var context = element.getContext( "2d" ) ;

// パスをリセット
context.beginPath () ;

// 適当に描画
context.fillStyle = "red" ;
context.rect( 50, 50, 100, 100 ) ;
context.fill() ;

// Data URIを取得
var url = element.toDataURL() ;

Blob

Blob(File)に変換したい場合はtoBlob()を利用します。toDataURL()とは仕様が違い、返り値ではなく、引数のコールバック関数でBlobを受け取ります。2017年8月現在、Safariが11(2017年後半)から対応予定など、まだ全てのブラウザには浸透していません。

// element = <canvas width="200" height="200"></canvas>
var context = element.getContext( "2d" ) ;

// パスをリセット
context.beginPath () ;

// 適当に描画
context.fillStyle = "red" ;
context.rect( 50, 50, 100, 100 ) ;
context.fill() ;

// Brobを取得
element.toBlob( function ( blob ) {
	// URLを取得
	var url = window.URL.createObjectURL( blob ) ;
} ) ;

デモ

Data URI

// element = <canvas id="target" width="200" height="200"></canvas>
var element = document.getElementById( "target" ) ;
var context = element.getContext( "2d" ) ;

context.beginPath () ;

context.fillStyle = "gold" ;
context.rect( 50, 50, 100, 100 ) ;
context.fill() ;

var url = context.toDataURL() ;

var image = new Image() ;
image.src = url ;
document.body.appendChild( image ) ;

200x200のキャンパスです。

変換した画像が下記です。

Blob

// element = <canvas id="target" width="200" height="200"></canvas>
var element = document.getElementById( "target" ) ;
var context = element.getContext( "2d" ) ;

context.beginPath () ;

context.fillStyle = "purple" ;
context.rect( 50, 50, 100, 100 ) ;
context.fill() ;

element.toBlob( function ( blob ) {
	var url = window.URL.createObjectURL( blob ) ;

	var image = new Image() ;
	image.src = url ;
	document.body.appendChild( image ) ;
} ) ;

200x200のキャンパスです。

変換した画像が下記です。

  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年8月3日 (木)
コンテンツを公開しました。