Question

我正在加载html2canvas，其中包含以下脚本：

 $(function() {
             $("#btnSave").click(function() {
                                 html2canvas($(".widget"), {
                                             onrendered: function(canvas) {
                                             theCanvas = canvas;
                                             document.body.appendChild(canvas);

                                             // Convert and download as image
                                             Canvas2Image.saveAsPNG(canvas);
                                             $("#img-out").append(canvas);
                                             // Clean up
                                             //document.body.removeChild(canvas);
                                             }
                                             });
                                 });
             });

我有一个id为“btnSave”的按钮，点击它时会生成我的画布图像。现在，我不想点击按钮，而是希望它自动加载到页面上。这可能吗？

js指向我正在使用的内容：https://jsfiddle.net/h5ase09f/

提前致谢！

Answer 1

尝试使用ready回调加载文档后执行此操作：

$(document).ready(function(){
     html2canvas($(".widget"), {
       onrendered: function(canvas) {
         theCanvas = canvas;
         document.body.appendChild(canvas);

         // Convert and download as image
         Canvas2Image.saveAsPNG(canvas);
         $("#img-out").append(canvas);
         // Clean up
         //document.body.removeChild(canvas);
       }
     });
});

Answer 2

使用$（document）.ready代替$（id）.click，它会自动加载。

$(document).ready(function() {
  var widget = $(".widget")[0]
  var result = html2canvas(widget).then(function(canvas) {
    console.log('rendered');
    theCanvas = canvas;
    document.body.appendChild(canvas);

    // Convert and download as image
    Canvas2Image.saveAsPNG(canvas);
    $("#img-out").append(img);
  }).catch(
    // Log the rejection reason
    (reason) => {
      console.log('Handle rejected promise (' + reason + ') here.');
    });

  console.log('running');
  console.log(result);

});

/* ------- BLACK BOX ------- */

.template2,
.template3,
.template4 {
  background: rgba(0, 0, 0, 0.6);
  background-size: cover;
  width: 50%;
  position: relative;
  left: 25%;
  top: 25%;
  max-height: 50%;
}


/* ------- ADDRESS POSITIONING ------- */

.template2 .data {
  position: absolute;
  z-index: 111;
  text-align: center;
  color: #fff;
  font-family: Lato;
  padding-left: 20%;
  padding-top: 14%;
}

.template3 .data {
  position: absolute;
  z-index: 111;
  text-align: center;
  color: #fff;
  font-family: Lato;
  padding-left: 12%!important;
  padding-top: 14%!important;
}

.template4 .data {
  position: absolute;
  z-index: 111;
  text-align: center;
  color: #fff;
  font-family: Lato;
  padding-left: 9%!important;
  padding-top: 14%!important;
}


/* ------- TITLE TEXT ------- */

.template2 .data h2 {
  font-family: Montserrat;
  font-size: 5.6rem;
  line-height: 1;
}

.template3 .data h2 {
  font-family: Montserrat;
  font-size: 5.6rem;
  line-height: 1;
}

.template4 .data h2 {
  font-family: Montserrat;
  font-size: 5.6rem;
  line-height: 1;
}


/* ------- ADDRESS TEXT ------- */

.template2 .data p {
  margin: 0;
  text-transform: uppercase;
  font-family: arial;
  letter-spacing: 1.5px;
  font-weight: regular;
  font-size: 18px;
}

.template3 .data p {
  margin: 0;
  text-transform: uppercase;
  font-family: lato;
  letter-spacing: 1.5px;
  font-weight: bold;
}

.template4 .data p {
  margin: 0;
  text-transform: uppercase;
  font-family: lato;
  letter-spacing: 1.5px;
  font-weight: bold;
}

.line {
  border-bottom: 2px solid #fff;
  width: 45px;
}

</style>

<script src="https://cdn.jsdelivr.net/canvas2image/0.1/canvas2image.min.js"></script>
<link href="https://cotala.com/social/profile/css/script.css" rel="stylesheet" />
<script src="https://cotala.com/social/profile/js/html2canvas.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="off-canvas-wrapper">
  <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>

    <center><input type="button" id="btnSave" value="Save" />
      <div id="img-out"></div>
    </center>

    <div class="column">
      <div id="html2canvas">
        <div class="widget thumbnail">

          <div class="template2">
            <div class="absolute">
              <div class="data">
                <h2>JUST<br>SOLD</h2>
                <hr class="line">
                <p>1234&nbsp;Address&nbsp;Avenue<br>Langley<br>Walnut&nbsp;Grove</p>

              </div>
            </div>
            <img src="http://cotala.com/social/profile/images/templates/blank.png">
          </div>

        </div>
      </div>


    </div>

注意代码段可能无法在此处运行。收到跨域安全错误。工作小提琴在这里：https://jsfiddle.net/q04quu74/

Answer 3

这就是你要找的东西吗？

$(document).ready(function(){
    $( "#btnSave" ).trigger( "click" );
});

Answer 4

你可能只是在身体的onload函数上运行它。 This是一个非常好的例子。

可选地

将您的遗体更新为<body onload="load">

在您的js中，您可以使用以下

function load() {
  html2canvas($(".widget"), {
    onrendered: function(canvas) {
      theCanvas = canvas;
      document.body.appendChild(canvas);

      // Convert and download as image
      Canvas2Image.saveAsPNG(canvas);
      $("#img-out").append(canvas);
      // Clean up
      //document.body.removeChild(canvas);
    }
  });
}

更改.click功能按钮以立即加载？

4 个答案: