Saving Div Contents or Canvas as Image

How to save the contents of a div as a image?

There are several of this same question (1, 2). One way of doing it is using canvas. Here's a working solution. Here you can see some working examples of using this library.

Generate an image of a div and Save as

Here is the final code, if it can helps you :

function PrintDiv(div)
{
    html2canvas((div), {
        onrendered: function(canvas) {
            var myImage = canvas.toDataURL();
            downloadURI(myImage, "MaSimulation.png");
      }
    });
}

function downloadURI(uri, name) {
    var link = document.createElement("a");

    link.download = name;
    link.href = uri;
    document.body.appendChild(link);
    link.click();   
    //after creating link you should delete dynamic link
    //clearDynamicLink(link); 
}

Saving Div Contents or Canvas as Image

You may want to look at:
http://html2canvas.hertzen.com/

A similar question was already asked:
Screen Grab with PHP and/or Javascript?

How to save div as image without additional libraries?

Simply put, no. There's no native way to capture an element as an image without some third-party script.

HTML2Canvas is also very robust and quite lightweight, apart from errors when handling SVG images!

How to properly save and download div content using either JavaScript or jQuery

Extend your download() function with the next code:

    function download() {
         html2canvas(document.getElementById("div1")).then(function(canvas) {
            document.body.appendChild(canvas);

            const image = canvas.toDataURL("image/png", 1.0);
            const link = document.createElement("a");

            link.download = "my-image.png";
            link.href = image;
            link.click();
      });
     }

You will get that as downloaded file after click
Sample Image

Saving the canvas together with the Div

You can achieve that using a JavaScript library called html2canvas.

ᴅᴇᴍᴏ

let wrapper = document.querySelector('#wrapper');let title = document.querySelector('#title');let canvas = document.querySelector('#canvas');let ctx = canvas.getContext('2d');
let img = new Image();img.onload = function () {    ctx.drawImage(this, 0, 0, 150, 150);}img.crossOrigin = 'anonymous';img.src = 'https://i.imgur.com/Q6aZlme.jpg';
function save() {    html2canvas(wrapper, {        onrendered: function (canvas) {            let a = document.createElement('a');            a.href = canvas.toDataURL();            a.download = 'myImage.png';            document.body.appendChild(a);            a.click();            document.body.removeChild(a);        }    });}
#title {font: 16px Verdana;color: #07C}#canvas {border: 1px solid #ccc}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script><div id="wrapper">    <div id="title">DreiDreiDrei</div>    <canvas id="canvas" width="150" height="150"></canvas></div><button onclick="save()">Save as Image</button>

html making div to image

Please check this code, download it and run it on the browser. the download will not work directly from StackOverflow

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
</head>

<body>
    <div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px;
        padding-left: 25px; padding-top: 10px;">
        <strong>Codepedia.info</strong>
        <hr/>
        <h3 style="color: #3e4b51;">
            Html to canvas, and canvas to proper image
        </h3>
        <p style="color: #3e4b51;">
            <b>Codepedia.info</b> is a programming blog. Tutorials focused on Programming ASP.Net, C#, jQuery, AngularJs, Gridview, MVC, Ajax, Javascript, XML, MS SQL-Server, NodeJs, Web Design, Software</p>
        <p style="color: #3e4b51;">
            <b>html2canvas</b> script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation.
        </p>
    </div>
    <input download="download.png" id="btn-Preview-Image" type="button" value="Download" />
    <br/>

    <script>
        $(document).ready(function() {

            var element = $("#html-content-holder"); // global variable
            var getCanvas; // global variable
            var newData;

            $("#btn-Preview-Image").on('click', function() {
                html2canvas(element, {
                    onrendered: function(canvas) {
                        getCanvas = canvas;
                        var imgageData = getCanvas.toDataURL("image/png");
                        var a = document.createElement("a");
                        a.href = imgageData; //Image Base64 Goes here
                        a.download = "Image.png"; //File name Here
                        a.click(); //Downloaded file
                    }
                });
            });

        });
    </script>
</body>

</html>

saving div as image in desktop

Here is the answer...

Just copy and past it..

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<script src="https://files.codepedia.info/uploads/iScripts/html2canvas.js"></script>
<div id="firstshirt" class="container" style="float:left;">
    <center>
        <div id="wrapper">
            <div id="boxes" class="container5" style="float:center;">
                <div data-bind="foreach:items" class="fix_backround">
                    <div class="item" data-bind="draggable:true,droppable:true"></div>
                </div>
                <img id="img1" src="https://torcdesign.com/shirts/brown.jpg">
                <img id="output" class="out-put-img" style="position: absolute;top: 100px;right: 108px" height="80px" width="80px">
                <a href="" download><span id="image" class="preview-area"></span></a>
                <div id="fotos" >
                    <img class="modal-content" id="imgdisplay" />
                </div>
            </div>
        </div>
    </center>
    <br><br><br><br>
</div>
<div style='display:none;' id="mtsm">
    <div class="colore black active" data-image="https://torcdesign.com/shirts/black.jpg"></div>
</div>
<input id="btn-Preview-Image" type="button" value="Preview"/>
<a id="download" download="my_image.png" href="#">Download image</a>
<select id="imajes">
    <option value="">Choose Image</option>
    <option value="new-upload">Upload Image</option>
    <option value="dog">Dog</option>
</select>
<div class="file-upload-wrapper">
    <input type="file" class="upload-img" name="upload-new-img" id="upload-img"   />
    <!--<img id="output" height="80px" width="80px">-->
</div>

<script>
    // External added
    jQuery(download).ready(function () {
        jQuery(".file-upload-wrapper").hide();
        jQuery(".out-put-img").hide();
        jQuery("#imajes").change(function () {
            var selected = jQuery('#imajes').val();
            if (selected == "new-upload") {
                jQuery(".file-upload-wrapper").show();
            } else {
                jQuery(".file-upload-wrapper").hide();
            }
        });

        //File
        function readURL(input) {

            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    jQuery(".out-put-img").show();
                    $('#output').attr('src', e.target.result);
//                   / $('.append-img').append('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            }
        }
        jQuery("#upload-img").change(function () {
            readURL(this);
        });
    });
</script>

<select id="dog" name="subselector" class="subselector" style="display:none">
    <option value="">Choose an item</option>
    <option value="bulldog">Bulldog</option>
</select>
<div style='display:none;' id="bulldogimges" class="smallimages">
    <div class="imgcontainerss" data-image="https://torcdesign.com/clipart/pT78gE6pc.gif">
        <img src="https://torcdesign.com/clipart/pT78gE6pc.gif" alt="Smiley face" width="55" height="55">
    </div>
    <div class="imgcontainerss" data-image="https://torcdesign.com/clipart/LiKkRqkeT.gif">
        <img src="https://torcdesign.com/clipart/LiKkRqkeT.gif" alt="Smiley face" width="55" height="55">
    </div>
</div>
<h3>result:</h3>
<div>
    <div id="previewImage"></div>
</div>
<script>
    var download = document.getElementById("download"),
            result = document.getElementById("previewImage");

    function renderContent() {
        html2canvas(document.getElementById("firstshirt"), {
            allowTaint: true
        }).then(function (canvas) {
            result.appendChild(canvas);
            download.style.display = "inline";
            download.href = result.children[0].toDataURL();
        });
    }

    function downloadImage() {
    }
    document.getElementById("btn-Preview-Image").onclick = renderContent;
    download.onclick = downloadImage
    $(document).ready(function () {
        $('#imajes').change(function () {
            $('.subselector').hide();
            $('.smallimages').hide();
            $('#' + $(this).val()).show();
        });
        $('.smallimages').hide();
        var id = $(this).attr('id');
        var val = $(this).val();
        $('#dog').on('change', function () {
            $("#bulldogimges").css('display', (this.value == 'bulldog') ? 'block' : 'none');
        });
        $('img').on('click', function () {
            $('#fotos').append('<div class="imgdrag"><img class="modal-content" src="' + $(this).attr('src') + '"/></div>');
            $('.imgdrag').draggable();
            $('#fotos').droppable();
            $('.modal-content').resizable();
        });
    });
</script>

<style>
    .container {background-color: transparent;
                width: 300px;
                height: 300px;
                border: 2px solid;
                position: relative;
                overflow: hidden;

                /* Will stretch to specified width/height */
                background-size: 490px 500px;
                background-repeat: no-repeat;
    }
</style>

I hope its helpful to you..


Related Topics

Mysqli Query Doesn't Work Twice

Setting a Cookie in an Ajax Request

Best Way to Handle Dirty State in an Orm Model

How to Ensure I Caught All Errors from MySQLi::Multi_Query

How to Convert a PHP Query String into a Slash-Based Url

Get Order Increment Id in Magento

Php: Populating an Array with the Names of the Next 12 Months

Can PHP Read Text from a Powerpoint File

Confirmation That PHP Static Variables Do Not Persist Across Requests

MySQL Query: Retrieve Current Date Query

Call to Undefined Function Password_Hash()

Cannot Initialize Mbstring with PHP 7

In Htaccess, I'D Like to Replace Underscores with Hyphens and Then Redirect the User the New Url

Get/Set Dpi with PHP Gd/Imagick

Url Querystring with a PHP Include

Parse Error: Syntax Error, Unexpected '.', Expecting ',' or ';'

Fatal Error: Unsupported Operand Types

Woocommerce - Overriding Billing State and Post Code on Existing Checkout Fields


Leave a reply



Submit