使用 html2canvas 實現瀏覽器截圖

基於上一篇《h5 本地上傳圖片預覽 源碼下載》，今天分享一個圖片上傳后， 根據所上傳的圖片顏值隨機生成一個答案， 並且可以生成一張專屬於自己的名片。

首先上傳預覽我們已經實現了， 所以接下來我們只需要實現瀏覽器截圖功能就可以了。 目前最流行的應該是 html2canvas.js 了， 很多微信里面測試小游戲都是用的這個插件寫的。 因為非常的簡單易於操作。所以今天哦我們也一起分享一下如何使用html2canvas實現瀏覽器截圖。

第一步： 下載  html2canvas.js （點擊下載）  密碼：761e

第二部：引入插件

<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript" src="js/jquery2.2.4.min.js"></script> //基於jq的，所以需要引入jq

 

第三部： 頁面實現點擊按鈕

<div class="pageTwo">
    <!--  要截圖的區域，因為是動態生成的答案， 所以寫入了js -->
    <div class="con01" id="con"></div> 
    
    <!--截圖生成圖片所存放的url-->   
    <img id="screenShotImg" class="pic">
    <!--  截圖按鈕  -->
    <img src="img/share_press.png" class="share" /> 
    <p class="share_txt">長按保存，分享朋友圈引爆顏值暗戰！</p>
</div>

 

第四部：html2canvas最核心的代碼

<script type="text/javascript">

    $(document).ready(function () {

        document.querySelector('.share').onclick = function(){   

                  html2canvas(document.querySelector("#con")).then(function (canvas) {

                  //獲取截取圖片路徑

                  var base64Url = canvas.toDataURL('image/png');

                  //存入頁面指定位置

                  document.getElementById("screenShotImg").src = base64Url;

                  //后台操作處理

                  var base64 = "<img src=" + base64Url + " />"

                  $('.share').css('display','none');

                  $('.share_txt').css('display','block');

               });

        }

    });

</script>

執行完如上的代碼， 就可以生成你想要區域的截圖了！

提示： h5上傳本地預覽的url如果不合適， 此插件截圖的時候顯示空白！但是經過試驗上篇文章的方法， 結合這個截圖是成功的！

未經允許不得轉載