Edit this page

imageDataURL

Returns a PNG image of the gauge encoded as a Data URL.

This method is obsoleted and replaced by exportImage, but will remain fully functional.

Returns

String A data URL with image/png MIME type. Will be null if the browser does not support the canvas element.

Example - show a snapshot of the gauge

<div id="gauge"></div>
<a download="export.png" id="export" class="k-button">Export PNG</a>
<script>
    $("#gauge").kendoArcGauge({
        value: 50
    });

    $("#export").on("click", function() {
        var gauge = $("#gauge").data("kendoArcGauge");
        var imageDataURL = gauge.imageDataURL();

        if (navigator.msSaveBlob) {
            var blob = toBlob(imageDataURL, "image/png");
            navigator.msSaveBlob(blob, this.getAttribute("download"));
        } else {
            this.href = imageDataURL;
        }
    });

    // See: http://goo.gl/qlg5dd
    function toBlob(base64, type) {
        var rawData = base64.substring(base64.indexOf("base64,") + 7);
        var data = atob(rawData);
        var arr = new Uint8Array(data.length);

        for (var i = 0; i < data.length; ++i) {
            arr[i] = data.charCodeAt(i);
        }

        return new Blob([ arr.buffer ], { type: type });
    }
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy