Question

HTML：

<html>
<head>
    <title>RO View</title>
    <link href="http://ec2-52-66-146-251.ap-south-1.compute.amazonaws.com/Purvi/assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
    <style type="text/css">
        html { 
          background: url(http://ec2-52-66-146-251.ap-south-1.compute.amazonaws.com/Purvi/assets/RO/RO.jpg) no-repeat center center fixed; 
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
          background-attachment: scroll;
          width: 1496px;
          height:1066px;
        }
        p{
            font-weight: bold;
            font-size: 18px;
            font-family: 'Open Sans', sans-serif;
        }
    </style>
</head>
<body style="background-color: transparent;" id="completewebpage">
  <div style="width:770px;height:24px;margin-top: 257px;margin-left: 300px;"><p>Gujarat Samachar</p></div>
  <div style="width: 705px;height:24px;margin-top: 30px;margin-left: 365px;"><p>Surat</p></div>
  <div style="width: 915px;height:24px;margin-top: 32px;margin-left: 155px;"><p>Adink</p></div>
  <div style="width: 185px;height:24px;margin-top: -140px;margin-left: 1235px;"><p>21-09-2017</p></div>
  <div style="width: 185px;height:24px;margin-top: 35px;margin-left: 1235px;"><p>2</p></div>
  <div style="width: 185px;height:24px;margin-top: 35px;margin-left: 1235px;"><p>₹ 100 / Sq. Cm</p></div>
  <div style="width: 255px;height:24px;margin-top: 130px;margin-left: 50px;"><p style="text-align: center;">30-11--0001<br>(Monday)</p></div>
  <div style="width: 205px;height:24px;margin-top: -24px;margin-left: 307px;"><p style="text-align: center;">8*5 Sq. Cm</p></div>
  <div style="width: 257px;height:24px;margin-top: -24px;margin-left: 513px;"><p style="text-align: center;"Plus Purti First Page</p></div>
  <div style="width: 289px;height:24px;margin-top: -24px;margin-left: 771px;"><p style="text-align: center;">Sale</p></div>
  <div style="width: 380px;height:24px;margin-top: -24px;margin-left: 1061px;"><p style="text-align: center;">email</p></div>
</body>

jQuery的：

<script type="text/javascript">
$(document).keypress(function(e) {
  if(e.which == 13) {
    html2canvas($('html'), 
    {
      onrendered: function (canvas) {
        var a = document.createElement('a');
        // toDataURL defaults to png, so we need to request a jpeg, then convert for file download.
        a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");
        a.download = 'somefilename.jpg';
        a.click();
      }
    });
  }
});
</script>

URL：

http://ec2-52-66-146-251.ap-south-1.compute.amazonaws.com/Purvi/index.php/RO/ro_view_pdf_show/2

通过点击回车键生成JPEG，任何人都可以请帮助我为什么缺少背景图片，我该如何解决这个问题？图像以HTML标记加载。

缺少HTML2CANVAS背景图片

0 个答案: