如何修复 html2canvas 中的 div 位置

Question

我正在尝试制作定制产品，而我遇到的问题是当我定制我的产品并尝试保存或预览它时，我的 div 位置与我之前设置的不同！ printArea 是我想要作为图像的 div。

    <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>

我想要什么 http://i.imgur.com/Y8vMf35.png

我得到了什么 http://i.imgur.com/wZt9eDF.png

Answer 1

Flex 可用于使元素居中：

 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>