如何修复html2canvas中的div位置

Question

i am trying to make a customized product, and the issue i am getting here is when i customize my product and try to save it or preview it my div position is not the same i set before! printArea is the div which i want as an image.

    <style>
        #printArea
        {
            z-index: 1;
            height: 330px;
            width: 330px;
            border: 1px dashed black;
            align-items: center;
            position: relative;
            left: 126;
            top: 165;
            margin: 20px;
            padding: 10px;
            overflow: hidden;   
        }
    </style>
        <div class="row">
            <div class="col-md-2">
                <input type="file" name="file">             
            </div>
            <div class="col-md-8"></div>
            <div class="col-md-2">
                <a href="#" class="button btn btn-download" id="btn-Preview-Image">Preview</a>
                <a class="button btn btn-download" id="btn-Convert-Html2Image" href="#">Download</a>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">      
            </div>
            <div class="col-md-8">

                <div class="box">
                    <div id="printArea" class="print-area">
                        <div id="draggable4" class="ui-widget-content" style="width: 204px; height: 204px; overflow: hidden; z-index: 100;  left: 69px; top: 69px;">
                            <div class="upload-image-preview">

                            </div>
                        </div>
                    </div>
                    <img src="<?php echo base_url(); ?>assets/user/img/customTshirt.jpg" class="" id="mirror" style="position: relative; width: 600px; height: 600px; left: 13px; top: -350px; "/>
                </div>

            </div>
            <div class="col-md-2"></div>

        </div>


    </div>
    <div id="previewImage">
    </div>

<script type="text/javascript">
var element = $(".box"); // global variable
var getCanvas; // global variable

$("#btn-Preview-Image").on('click', function () {
    html2canvas(element, {
        onrendered: function (canvas) {
            $("#previewImage").append(canvas);
            getCanvas = canvas;
        }
    });
});

$("#btn-Convert-Html2Image").on('click', function () {
    var imgageData = getCanvas.toDataURL("image/png");
    // Now browser starts downloading it instead of just showing it
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});

</script>
</body>
</html>

What i want http://i.imgur.com/Y8vMf35.png

What i get http://i.imgur.com/wZt9eDF.png

Answer 1

Flex can be used to center elements:

  var element = $(".box"); // global variable var getCanvas; // global variable $("#btn-Preview-Image").on('click', function () { html2canvas(element, { onrendered: function (canvas) { $("#previewImage").append(canvas); getCanvas = canvas; } }); }); $("#btn-Convert-Html2Image").on('click', function () { var imgageData = getCanvas.toDataURL("image/png"); // Now browser starts downloading it instead of just showing it var newData = imgageData.replace(/^data:image\\/png/, "data:application/octet-stream"); $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData); }); 

  #printArea { z-index: 1; height: 330px; width: 330px; border: 1px dashed red; padding: 10px; overflow: hidden; position: absolute; } .box{ display: inline-block; } .wrapper { display: flex; align-items: center; justify-content: center; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="col-md-2"> <input type="file" name="file"> </div> <div class="col-md-8"></div> <div class="col-md-2"> <a href="#" class="button btn btn-download" id="btn-Preview-Image">Preview</a> <a class="button btn btn-download" id="btn-Convert-Html2Image" href="#">Download</a> </div> </div> <div class="row"> <div class="col-md-2"> </div> <div class="col-md-8"> <div class="box"> <div class="wrapper"> <div id="printArea" class="print-area"> <div id="draggable4" class="ui-widget-content" style="width: 204px; height: 204px; overflow: hidden; z-index: 100; left: 69px; top: 69px;"> <div class="upload-image-preview"> </div> </div> </div> <img src="https://via.placeholder.com/600" class="" id="mirror" style="position: relative; width: 600px; height: 600px; left: 13px;"/> </div> </div> </div> <div class="col-md-2"></div> </div> </div> <div id="previewImage"> </div> 

Answer 2

  var element = $(".box"); // global variable var getCanvas; // global variable $("#btn-Preview-Image").on('click', function () { html2canvas(element, { onrendered: function (canvas) { $("#previewImage").append(canvas); getCanvas = canvas; } }); }); $("#btn-Convert-Html2Image").on('click', function () { var imgageData = getCanvas.toDataURL("image/png"); // Now browser starts downloading it instead of just showing it var newData = imgageData.replace(/^data:image\\/png/, "data:application/octet-stream"); $("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData); }); 

  .box { height: 730px; width: 100%; border: 1px dashed black; align-items: center; float: none; margin-top: 20px; padding: 10px; position: relative; } #mirror{ position: absolute; width: 600px; height: 600px; left: 0; top: 0; right: 0; margin: auto; } #printArea { z-index: 1; height: 330px; width: 330px; align-items: center; position: absolute; left: 0; top: 26%; margin: auto; padding: 10px; overflow: hidden; right: 7px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="row"> <div class="col-md-2"> <input type="file" name="file"> </div> <div class="col-md-8"></div> <div class="col-md-2"> <a href="#" class="button btn btn-download" id="btn-Preview-Image">Preview</a> <a class="button btn btn-download" id="btn-Convert-Html2Image" href="#">Download</a> </div> </div> <div class="row"> <div class="col-md-2"> </div> <div class="col-md-8"> <div class="box"> <div id="printArea" class="print-area"> <div id="draggable4" class="ui-widget-content" style="width: 204px; height: 204px; overflow: hidden; z-index: 100; left: 69px; top: 69px;"> <div class="upload-image-preview"> </div> </div> <img src="https://via.placeholder.com/600" class="" id="mirror" style="position: relative; width: 600px; height: 600px; left: 13px;"/> </div> </div> </div> <div class="col-md-2"></div> </div> </div> <div id="previewImage"> </div>