div content to image

Question

div content to image

70 views Asked by Alton Huang At 14 August 2023 at 03:48

This is my code, I am using IE 11 for testing on my project, and the download function did not work. I want to make it download the content as images, please help me find the solution, Thanks.:

$(document).ready(function() {
    // Click event handler for the capture button
    $('#captureButton').click(function() {
        // Get the element you want to capture
        var elementToCapture = document.getElementById('contentToCapture');
        
        // Use html2canvas to render the element as a canvas
        html2canvas(elementToCapture).then(function(canvas) {
            // Convert the canvas to a data URL
            var dataUrl = canvas.toDataURL();
            
            // Create a link to trigger the download
            var link = document.createElement('a');
            link.href = dataUrl;
            link.download = 'captured-content.png';
            link.click();
        });
    });
});

        /* Styles for the content to be captured */
        #contentToCapture {
            width: 400px;
            padding: 20px;
            background-color: lightgray;
        }

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>

<div id="contentToCapture">
    <h1>Sample Content</h1>
    <p>This is the content you want to capture and save as an image.</p>
</div>

<button id="captureButton">Capture and Save as Image</button>

Original Q&A

There are 1 answers

**esipagan** · Answer 1 · 2023-08-14T04:00:39+00:00

How about try to convert to Blob object from the data URL and then use the msSaveOrOpenBlob method for triggering the download. Here's how you can modify your code to make it work in IE 11:

<!DOCTYPE html>
<html>
<head>
    <title>Save Page Content as Image</title>
    <style>
        /* Styles for the content to be captured */
        #contentToCapture {
            width: 400px;
            padding: 20px;
            background-color: lightgray;
        }
    </style>
</head>
<body>

<div id="contentToCapture">
    <h1>Sample Content</h1>
    <p>This is the content you want to capture and save as an image.</p>
</div>

<button id="captureButton">Capture and Save as Image</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
<script>
$(document).ready(function() {
    // Click event handler for the capture button
    $('#captureButton').click(function() {
        // Get the element you want to capture
        var elementToCapture = document.getElementById('contentToCapture');
        
        // Use html2canvas to render the element as a canvas
        html2canvas(elementToCapture).then(function(canvas) {
            // Convert the canvas to a Blob object
            canvas.toBlob(function(blob) {
                // Create a temporary anchor element to trigger the download
                var link = document.createElement('a');
                link.href = window.URL.createObjectURL(blob);
                link.download = 'captured-content.png';
                
                // For IE 11
                if (window.navigator.msSaveOrOpenBlob) {
                    window.navigator.msSaveOrOpenBlob(blob, 'captured-content.png');
                } else {
                    // For other browsers
                    link.click();
                }
            });
        });
    });
});
</script>

</body>
</html>

TechQA.

div content to image

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in INTERNET-EXPLORER-11

Popular Questions

Popular Tags

Trending Questions