div内容相互覆盖

Question

I have a div in which I applied text and images.It looks fine until I convert it as an image using html2canvs library.When this div is converted to image the text become smaller and other image inside div overwrite it. I want that the div image looks as it was before capturing that div.

 function ConvertToImage(btnExport) { html2canvas($("#myDIV")[0]).then(function(canvas) { var base64 = canvas.toDataURL(); $("[id*=hfImageData]").val(base64); __doPostBack(btnExport.name, ""); }); return false; } 

 #myDIV { width: 550px; height: 650px; background-image: url(myimg.png); color: orange; float: right; margin-top: 150px; background-repeat: no-repeat; border: 2px solid midnightblue; margin-right: 150px; font-size: x-large; } #logo { width: 85px; height: 150px; background-image: url('logo.png'); background-size: cover; background-repeat: no-repeat; background-color: rgba(0, 0, 0, 0.1); } #logo2 { width: 85px; height: 150px; background-image: url('logo2.png'); background-size: cover; background-repeat: no-repeat; } .text_decoration { width: 200px; height: 60px; background: transparent; border: none; } 

 <div id="myDIV"> <div style="height:510px;width:290px;margin:50px 100px"> <input maxlength="15" type="text" id="myText" class="text_decoration resize-drag" autocomplete="off" /> <div id="logo" class="resize-drag"></div> <div id="logo2" class="resize-drag"></div> <img id="images" src="#" class="resize-drag" style="display:none" /> </div> </div> <asp:HiddenField ID="hfImageData" runat="server" /> <asp:Button ID="btnExport" Text="Export to Image" runat="server" UseSubmitBehavior="false" OnClick="ExportToImage" OnClientClick="return ConvertToImage(this)" CssClass="btnstyle" Height="50px" Width="200px" /> 

       protected void ExportToImage(object sender, EventArgs e)
    {
        string base64 = Request.Form[hfImageData.UniqueID].Split(',')[1];
        byte[] bytes = Convert.FromBase64String(base64);
        MemoryStream msImage = new MemoryStream(bytes,0,bytes.Length);
        msImage.Write(bytes, 0, bytes.Length);
        System.Drawing.Image imageTosave = 
        System.Drawing.Image.FromStream(msImage, true);
        string fileName = Guid.NewGuid() + ".png";
        string filePath = 
        Path.Combine(Server.MapPath("~/CanvasImages/"+fileName));         
        imageTosave.Save(filePath, ImageFormat.Png);
        string dbPath = "~/CanvasImages/" +fileName;
       }

Answer 1

I'm no expert however when I have this issue I find that the most common issues are

display: block;

or Padding and Margins