1：首先页面引入html2canvas.min.js，下载到本地
html2canvas.min.js
2：逻辑直接下载代码里了，上代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
</head>
<style>
#content {
width: 200px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
background: #ccc;
}
.nike img {
width: 50px;
}
</style>
<body>
<button class="btn" onclick="generateImage()">生成图片</button>
<div id="content">
<!-- content里面写你想要生成图片的html代码，style里面都可以去调样式 -->
<div class="nike">
<img src="./images/nike.png" alt="">
<p>鸡吡你</p>
</div>
</div>
</body>
<script>
function generateImage() {
html2canvas(document.getElementById('content'), {
onrendered: function(canvas) {
// 创建一个新的图像元素
var img = document.createElement('img');
// 设置图像的源为canvas生成的DataURL
img.src = canvas.toDataURL('image/png');
// 创建一个下载链接
var link = document.createElement('a');
link.href = img.src;
link.download = 'image.png'; // 名称可以修改
link.textContent = '下载图片';
// 将图像和下载链接添加到页面
document.body.appendChild(img);
document.body.appendChild(link);
}
});
}
</script>
</html>
效果图：
下载后的图片
总结：希望对大家有所帮助，有其他好的方法或建议可以一起沟通。
