Snapshot canvas error

Question

When i try to save the image from the canvas returned with map.capture function i am getting the following error:

Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

I am using the following code from Here API examples:

map.capture(function(canvas) {
    if ( canvas ) {
        snapshotContainer.innerHTML = '';
        snapshotContainer.appendChild(canvas);
        console.log( canvas.toDataURL() );
    }else{
        snapshotContainer.innerHTML = 'Capturing is not supported';
    }
}, [ui], 0, 0, 1000, 1000);

The canvas appears in the snapshotContainer object.

Answer 1

This Example will help: https://tcs.ext.here.com/examples/v3/fleet

function capture(map, ui) {
    // Capturing area of the map is asynchronous, callback function receives HTML5 canvas
    // element with desired map area rendered on it.
    // We also pass a H.ui.UI reference in order to see the ScaleBar in the result.
    // If dimensions are omitted, whole map will be captured, from top left corner up to
    // the bottom right.
    map.capture(function(canvas) {
        if (canvas) {
            snapshotContainer.innerHTML = '';
            snapshotContainer.appendChild(canvas);
            window.open(canvas.toDataURL());
            } else {
            // For example when map is in Panorama mode
            alert('Capturing is not supported');
        }
    }, [ui], 0, 0, document.getElementById("mapContainer").offsetWidth, document.getElementById("mapContainer").offsetHeight);
}