JavaScriptプログラムに関する各種メモ書き

canvas に描画した画像をファイルとしてダウンロードさせる

● canvas に描画した画像をファイルとしてダウンロードさせる

canvas.toDataURL を使わないので、Google Chromeで2MB以上の画像ファイルもダウンロードできます。

/**
 * <canvas id="canvas_download"></canvas> の画像を画像ファイルとしてダウンロードさせます
 *
 * @param   string      canvas_id_name          ダウンロードさせるのキャンバスのID
 * @param   string      download_file_name      ファイル名
 *
 */
function CanvasDataDownload( canvas_id_name, download_file_name ) {
    var canvas = document.getElementById( canvas_id_name );
    var type = 'image/png';
    var dataurl = canvas.toDataURL(type);
    var bin = atob(dataurl.split(',')[1]);
    var buffer = new Uint8Array(bin.length);
    for (var i = 0; i < bin.length; i++) {
        buffer[i] = bin.charCodeAt(i);
    }
    var blob = new Blob([buffer.buffer], {type: type});

    var link = document.createElement("a");
    link.href = window.URL.createObjectURL(blob);
    link.download = download_file_name;
    link.click();
}
No.1581
09/03 13:41

edit