JSFiddle - React, Tailwind, and code Playground

by Emmanuel Garcia

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div id="mydiv">
    <img src="https://doc-0g-7c-docs.googleusercontent.com/docs/securesc/l8fg208o7qo1im0um6b2n9ugk4ogidct/1995aqvuf2kd500s4aj356un4o9u26lt/1642895850000/01414203990109486073/15073669663483514573/1n6lreKLZ_zyFk4XW76jq95-gmXVcwNdG?authuser=0" width="300" height="auto"/>
    <p>I have already created my data (template-containing image,text,label etc) inside div now i want to convert it into image format. is there any technique to convert a specific div content into images without using canvas.anybody plz help me ! i want to convert entire "mydiv" content into image and save that image into my image directory, when i click on save ?</p>
</div>
<br>
<br>
    
<div id="canvas">
    <p>Canvas:</p>
    </div>
    
    <div id="image">
        <p>Image:</p>
    </div>

CSS

#mydiv {
    background-color: lightblue;
    width: 400px;
    height: 400px
}

JavaScript

html2canvas([document.getElementById('mydiv')], {
    onrendered: function (canvas) {
        document.getElementById('canvas').appendChild(canvas);
        var data = canvas.toDataURL('image/png');
        // AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server

        var image = new Image();
        image.src = data;
        document.getElementById('image').appendChild(image);
    }
});