html2canvas官网链接地址：https://html2canvas.hertzen.com/
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用canvas将页面内容生成图片</title> 6 <style> 7 img { 8 width: 500px; 9 cursor: pointer; 10 } 11 </style> 12 </head> 13 <body> 14 <div class="wrapper" style="background-color:red; "> 15 <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" 16 style="cursor: pointer" onclick="wclick()"/> 17 </div> 18 <!-- 引入canvas.js插件 --> 19 <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script> 20 <script> 21 window.onload = function () { 22 // click(); 23 html2canvas(document.querySelector(".wrapper"), { 24 allowTaint: true, 25 useCORS: true, 26 }).then(canvas => { 27 console.log(canvas); 28 document.body.appendChild(canvas) 29 }); 30 } 31 32 function wclick() { 33 console.log("object"); 34 } 35 </script> 36 </body> 37 </html>