Question

我一直在尝试使用domtoimage.js和filesaver.js将div元素另存为图像。图片保存得很好，但是里面什么也没有。说图片无效。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md navbar-light sticky-top bg-white">
    <div class="container-fluid p-0">
        <button class="navbar-toggler my-2" type="button" data-toggle="collapse" data-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse flex-column align-items-center text-center ml-lg-2 ml-0" id="navbarCollapse">
          <ul class="navbar-nav flex-row mb-md-1 mt-md-0 mb-3 mt-2">
              <li class="nav-item">
                <div id="header" class="d-flex align-items-center justify-content-center">
                  <img src="https://logos-download.com/wp-content/uploads/2016/11/The_New_Yorker_logo.png" id="logo">
                </div>
              </li>
           </ul>
          <ul class="navbar-nav justify-content-center w-100 border-top border-bottom font-weight-bold" id="nav-collection">
                <li class="nav-item active">
                    <a class="nav-link" href="#">News</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Culture</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Books</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Business & Tech</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Humor</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Cartoons</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Magazine</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Video</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Podcasts</a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="content"></div>

任何帮助将不胜感激。

Answer 1

文档显示了此示例，这意味着toBlob函数返回一个promise，因此您必须使用//Click on left Button leftBTN.setOnClickListener(new View.OnClickListener(){ @Override public void onClick(View v){ //Change Date to previous day SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd"); try{ Date prevDate = format.parse(date); Calendar cal = Calendar.getInstance(); cal.setTime(prevDate); cal.add(Calendar.DATE, -1); Date mydate = cal.getTime(); SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); try { date = sdf.format(mydate); } catch (Exception e){ e.printStackTrace(); } /* mYear = cal.get(Calendar.YEAR); mMonth = cal.get(Calendar.MONTH); mDay = cal.get(Calendar.DAY_OF_MONTH); date = (mYear + "-" + mMonth + "-" + mDay); */ }catch (ParseException e){ e.printStackTrace(); } //Set Left/Right Button setBTN(); //Update ListView adapter.notifyDataSetChanged(); } });。

then

所以您的代码应该变成

domtoimage.toBlob(document.getElementById('my-node'))
  .then(function (blob) {
    window.saveAs(blob, 'my-node.png');
  });

保存的图片显示无效图片。此代码有什么问题？

1 个答案: