toBlob()でcanvasの内容を画像に変換する

以前toDataURL()を使ってcanvasの内容を画像に変換する方法を記事にしましたが、別の方法としてtoBlob()を使うやり方を試してみます。

サンプルコード

HTMLは以前の記事と同じです。

<canvas id="canvas" width="480" height="320"></canvas>
<button id="output">出力</button>
<div id="result"></div>

JavaScriptは変換する部分を変更します。

window.onload = function() {
    draw();
}
 
var canvas;
var ctx;
function draw() {
    canvas = document.getElementById('canvas');
    if(!canvas || !canvas.getContext) return false;
    ctx = canvas.getContext('2d');
 
    var img = new Image();
    img.src = 'image.jpg';
    img.onload = function() {
        // マスク
        ctx.beginPath();
        ctx.arc(240, 160, 150, 0, Math.PI * 2, false);
        ctx.clip();
 
        ctx.drawImage(img, 0, 0);
 
        ctx.font = 'bold 32px MS PGothic';
        ctx.fillStyle = '#ff0000';
        ctx.fillText('テスト', 260, 240);
    }
}
 
document.getElementById('output').addEventListener('click', function() {
    // canvasを画像に変換して出力
    canvas.toBlob(function(result) {
        console.log(result);
        var imageURL = URL.createObjectURL(result);
        document.getElementById('result').innerHTML = '<img src="' + imageURL + '">';
    });
}, false);

toBlob()で変換した結果を31行目でconsoleに表示していますが、変換した内容をcreateObjectURL()を使ってアクセスできるURLを生成しています。
toBlob()で変換するデモページ

引数に拡張子を指定することもできます。

window.onload = function() {
    draw();
}
 
var canvas;
var ctx;
function draw() {
    canvas = document.getElementById('canvas');
    if(!canvas || !canvas.getContext) return false;
    ctx = canvas.getContext('2d');
 
    var img = new Image();
    img.src = 'image.jpg';
    img.onload = function() {
        // マスク
        ctx.beginPath();
        ctx.arc(240, 160, 150, 0, Math.PI * 2, false);
        ctx.clip();
 
        ctx.drawImage(img, 0, 0);
 
        ctx.font = 'bold 32px MS PGothic';
        ctx.fillStyle = '#ff0000';
        ctx.fillText('テスト', 260, 240);
    }
}
 
document.getElementById('output').addEventListener('click', function() {
    // canvasを画像に変換して出力
    canvas.toBlob(function(result) {
        console.log(result);
        var imageURL = URL.createObjectURL(result);
        document.getElementById('result').innerHTML = '<img src="' + imageURL + '">';
    }, 'image/jpeg');
}, false);

toBlob()で変換するデモページ2