Dom-to-image base64 thru ajax and save as PPT

37 Views Asked by At

Am working on the page where I could take the screenshot of a div element and store it as ppt file. Earlier I used html2canvas and it doesn't have clear image. So, I used dom-to-image library. However, I am unable to download as PPT file.

Please anyone help me on this. Below I have given both the codes.


    function screenshot() {
        html2canvas(document.getElementById("containerId"), { scale: 6 }).then(function (canvas) {
            console.log("Canvas: " + canvas);
            // Get base64URL
            // AJAX request
            var base64URL = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream') + "," + $('#department').val();
            console.log('Base: ' + base64URL);
            $(".overlay").show();
            $.ajax({
                url: "/Sheet/chart/",
                type: 'post',
                data: { image: base64URL },
                success: function (data) {
                    console.log('Upload successfully.');
                    $(".overlay").hide();
                    $("[name=chartDownload]").click();
                }
            });
        });
    }

    domtoimage.toPng(node, options).then(function (dataUrl) {
        console.log(dataUrl);
        var link = document.createElement('a');
        link.download = 'Chevron-chart.png';
        link.href = dataUrl;
        link.click();
        //var img = new Image();
        //img.src = dataUrl;
        //document.body.appendChild(img);
$.ajax({
                url: "/Sheet/chart/",
                type: 'post',
                data: { image: base64URL },
                success: function (data) {
                    console.log('Upload successfully.');
                    $(".overlay").hide();
                    $("[name=chartDownload]").click();
                }
            });
    
    });
0

There are 0 best solutions below