js将html转换成图片并下载 |
您所在的位置：网站首页 › 图片转网页代码 › js将html转换成图片并下载 |
js将html转换成图片并下载
|
1：首先页面引入html2canvas.min.js，下载到本地 html2canvas.min.js 2：逻辑直接下载代码里了，上代码。 #content { width: 200px; height: 100px; display: flex; align-items: center; justify-content: center; background: #ccc; } .nike img { width: 50px; } 生成图片 鸡吡你 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); } }); }效果图： 总结：希望对大家有所帮助，有其他好的方法或建议可以一起沟通。 |
下载后的图片 
【本文地址】