Question

我有一个div，我动态添加内容，在添加所有内容之后，我将整个div转换为一个Image to canvas。在整个时间内，隐藏的div未显示但存在于背景中。我的问题是，如果属性“visibility”设置为“hidden”，我只能将隐藏的div转换为图像。如果我将“display”设置为“none”，那么我无法将图像绘制到画布上。因为我不能做显示：没有;我的整个布局搞砸了。

任何人都可以建议我应该做什么，以便我的布局不受影响，我仍然隐藏在背景隐藏的div，以便我可以动态添加内容，然后转换为图像？我很感激帮助。

我隐藏的div

<div class="temp" style="visibility:hidden;">
  <div id="finalimage">
  </div>
</div>

我的Javascript

$(document).ready(function () {

   $("#preview").click(function () {
      var extra_canvas = document.createElement("canvas");
      var finaldivheight = $("#finalimage").css('height');
      var finaldivwidth = $("#finalimage").css('width');
      extra_canvas.setAttribute('width', 1013);
      extra_canvas.setAttribute('height', 460);
      html2canvas($('#finalimage'), {

            onrendered: function (canvas) {

                var ctx = extra_canvas.getContext('2d');
                ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, widthhalf, heighthalf);
                var dataURL = extra_canvas.toDataURL();
                sendImg = extra_canvas.toDataURL("image/png");

                var img = $(document.createElement('img'));
                img.attr('src', dataURL);

                img.attr('width', '100%');
                img.attr('height', 'auto');
                $('#secondfinal').html(img);

                //secondfinal div is inside the Modal and thats what I am previewing
                $("#myModal").modal("show");

            }

        });
    }
    }

隐藏div而不会弄乱布局

0 个答案: