<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>html2img</title> <style> * { margin: 0; padding: 0; } body { position: relative; } .s_html { width: 100%; position: relative; } .s_html img { display: block; } .msg_1 , .msg_2 { position: absolute; width: 100%; box-sizing: border-box; height: 60px; line-height: 60px; text-align: center; left: 0; } .msg_1 { bottom: 120px; padding: 20px; } .msg_1 div{ background: red; width: 100%; } .msg_2 { bottom: 188px; padding: 20px; } .msg_2 div { background: blue; width: 100%; } .down { position: absolute; bottom: 80px; right: 20px; z-index: 1; padding: 10px 20px; border-radius: 10px; background: rgba(0, 0, 0, .6); } </style> </head> <body> <div id="s_html" class="s_html"> <!-- <a class="down" href="" download="downImg">下载</a> --> <img width="100%" src="./img/1212.jpg" alt="bg"> <div class="msg_1" id="msg_1"> <div> lpl <span>总冠军</span> </div> </div> <div class="msg_2" id="msg_2"> <div> IG <span>牛逼</span> </div> </div> </div> <!-- <a class="down" id="down" href="" download="downImg">下载</a> --> </body> <script src="./js/jquery-3.3.1.js"></script> <script src="./js/html2canvas.min.js"></script> <script src="./js/canvas2image.js"></script> <script> // 获取jq转化为dom对象 var s_html = $('#s_html').get(0); // 将html转化成canvas html2canvas(s_html).then(function(canvas) { // canvas宽度 var canvasWidth = canvas.width; // canvas高度 var canvasHeight = canvas.height; // 清空body $('#s_html').html(''); // 渲染canvas $('#s_html').append(canvas); // 调用Canvas2Image插件 var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight); // 清空body $('#s_html').html(''); // 显然img $('#s_html').append(img); $(img).css({ "width": $('#s_html').width() + "px", "height": 'auto', "-webkit-touch-callout":"default" }) }) </script> </html>
地址https://github.com/TankRyze/html2img