代わりに.click機能ボタンをすぐに読み込むように変更しますか？

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」とボタンがあります。今、ボタンをクリックする代わりに、ページに自動的にロードすることをお勧めします。これは可能ですか？

jsFiddle私が働いているものに：事前にhttps://jsfiddle.net/h5ase09f/

ありがとう！

Answer 1

は準備ができてコールバックを使用してドキュメントをロードした後にそれをやってみてください。

$(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

使用$（ドキュメント）.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はかなり良い例です。

---

また

あなたはこれは完全に働いた次

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); 
    } 
    }); 
}