<!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>使用canvas将页面内容生成图片</title>

     <style>

         img {

             width: 500px;

             cursor: pointer;

         }

     </style>

 </head>

 <body>

     <div class="wrapper" style="background-color:red; ">

         <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533212152031&di=f26250570f7d5f2e7895c7c13e96d61a&imgtype=0&src=http%3A%2F%2Fh.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F267f9e2f07082838304837cfb499a9014d08f1a0.jpg"

             style="cursor: pointer" onclick="wclick()"/>

     </div>

     <!-- 引入canvas.js插件 -->

     <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

     <script>

         window.onload = function () {

             // click();

             html2canvas(document.querySelector(".wrapper"), {

                 allowTaint: true,

                 useCORS: true,

             }).then(canvas => {

                 console.log(canvas);

                 document.body.appendChild(canvas)

             });

         }

         function wclick() {

             console.log("object");

         }

     </script>

 </body>

 </html>