Question

我有一个div，在其中应用了文本和图像。直到我使用html2canvs库将其转换为图像时，它看起来还不错。当将该div转换为图像时，文本变小，而div中的其他图像将其覆盖。我希望div图像看起来像捕获该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

我不是专家，但是当我遇到此问题时，我发现最常见的问题是

display: block;

或填充和边距

div内容相互覆盖

1 个答案: