快照 canvas 错误

Question

当我尝试从 map.capture 函数返回的 canvas 中保存图像时，出现以下错误：

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

我正在使用此处 API 示例中的以下代码：

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);

canvas 出现在 snapshotContainer 对象中。

Answer 1

此示例将有助于：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);
}

快照 canvas 错误

Snapshot canvas error

here-api