export notation generated by alpatex into image file

[sugizo]

Description

some of music notation software has a feature to export notation into image file e.g. musescore, etc

Possible Solutions

e.g. this just a prototype, change svg_id with any html element produced by alphatab, but this code not work because alpatab generate more than 1 svg or canvas tags

<script>
document.getElementById ("downloadSVG").addEventListener ("click", downloadSVG, false);
document.getElementById ("downloadPNG").addEventListener ("click", downloadPNG, false);

var svg_id = document.getElementById("SvgId");

function downloadSVG() {
    var s = new XMLSerializer();
    var content = s.serializeToString(svg_id);
    var fileName = "{{=filename}}.svg";
    var a = document.createElement("a");
    var file = new Blob([content], {type: 'text/plain'});
    a.href = URL.createObjectURL(file);
    a.download = fileName;
    a.click();
}
function downloadPNG() {
    var width = 600
    var height = 600
    var canvas = document.createElement("canvas");
    var canvasContext = canvas.getContext("2d");

    canvas.width = width;
    canvas.height = height;

    var image = new Image;
    var s = new XMLSerializer();
    content = s.serializeToString(svg_id);
    image.src = 'data:image/svg+xml;base64,'+ btoa(unescape(encodeURIComponent(content) ) );
    image.onload = function() {
    canvasContext.drawImage(image, 0, 0);

    var a = document.createElement("a");
    a.download = "{{=filename}}.png";
    a.href = canvas.toDataURL("image/png");
    a.click();
    };
}
</script>

Question

is there any way to export notation generated by alpatex into image file (svg, png, etc) ?
or even better alphatab provided an api for this feature

thanks

[Danielku15]

AlphaTab provides the necessary APIs to build such an export functionality but it does not provide it out of the box.

If you just want to render the score off-screen you will need to use the Low Level APIs as described here: https://www.alphatab.net/docs/guides/lowlevel-apis/#rendering-files-via-scorerenderer

To render SVG contatenate all chunks into one big SVG. For Raster Images use the HTML5 engine and then use the resulting Canvas Element to export it to an image. If you are using the C# version you can fetch the SKImage instances and render them to a full canvas.

For C# there is a small sample project here: https://github.com/CoderLine/alphaTab/tree/develop/src.csharp/Samples/AlphaTab.Samples.PngDump

You can also increase https://www.alphatab.net/docs/reference/settings/display/barcountperpartial/ to get only one partial with all bars inside. But for HTML5 rendering you might run into issues when the canvas becomes too large. Browsers have limitations there.

[sugizo]

not sure got what you mean with one big SVG, tested but the result have several svg tags with layout mode 'Page'
e.g.

<div id = "notation" data-tex = "true" data-tracks = "all" data-display-staveprofile = "ScoreTab" data-display-layoutmode = "Page">
\title "Song Title" \artist "Song Artist" \album "Song Album"
.
\track "Guitar" "gtr."
\staff{tabs} \instrument 25 \tuning e4 b3 g3 d3 a2 e2 \capo 0 \chord{firstfret 3 barre 3} "C" 3 5 5 5 3 x \clef treble
\ks C \ts 4 4 \tempo 120
(3.1 5.2 5.3 5.4 3.5).1 {ch "C"} |
</div>

<script id = "alphatab">
var notation = document.getElementById('notation');

var settings = new alphaTab.Settings();
settings.core.engine = 'svg';
var renderer = new alphaTab.rendering.ScoreRenderer(settings);
renderer.width = 1200;

// Listen to Events 
let svgChunks = [];
renderer.preRender.on(isResize => {
    svgChunks = []; // clear on new rendering
});
renderer.partialRenderFinished.on(r => {
    svgChunks.push({
        svg: r.renderResult, // svg string
        width: r.width,
        height: r.height
    });
});
renderer.renderFinished.on(r => {
    displayResult(svgChunks, r.totalWidth, r.totalHeight);
});

// Fire off rendering
renderer.renderScore(notation, [0]);

// resize
renderer.width = 800;
renderer.resizeRender();

var api = new alphaTab.AlphaTabApi(notation);

// print
document.getElementById ("printSVG").addEventListener ("click", printSVG, false);

function printSVG() {
    api.print();
}
</script>

Expected result
alpatab only generate 1 svg tag or 1 canvas tag either using 'Page' or 'Horizontal' layout mode

Question
how can i achieve expected result above in alpatab ?

thanks

[Danielku15]

This is exactly the feature I described: The barcountperpartial causes alphaTab to slice down the overall music sheet into smaller chunks. Each resulting in one SVG tag or HTML5 canvas.

You can set barcountperpartial to a high number to get only one SVG or HTML5 canvas. But browsers might throw an error for large HTML5 canvases.

Alternatively concatenate the SVGs in your code using the results/chunks from alphaTab.