首页
前端开发
HTML5
html2canvas生成网页截图并保存图片

html2canvas生成网页截图并保存图片

0 次浏览 0 条评论
rar
rar

点击按钮直接把网页内容生成图片？嗯，html2canvas这招还挺好用的，尤其是在做截图、证据保存、社交分享这些功能时，简直太方便了。你只需要加个按钮，写点 JS 逻辑，剩下的交给它搞定。

html 的结构简单，一个按钮就能触发截图，比如：

<button id="save-image">保存图片</button>

核心逻辑在JavaScript这块，先引用好 html2canvas，监听点击事件：

document.getElementById('save-image').addEventListener('click', function() {
  html2canvas(document.body).then(function(canvas) {
    var imgData = canvas.toDataURL('image/png');
    var downloadLink = document.createElement('a');
    downloadLink.href = imgData;
    downloadLink.download = '网页截图.png';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
  });
});

你看，流程其实顺：先生成 canvas，再转成图片，模拟点击下载就搞定。哦对了，跨域图片、样式丢失这些坑会遇到，记得看看html2canvas的配置项，比如useCORS: true这种。

如果你在做报告导出、海报生成、截图存档，建议试试这个方式，简单实用，还挺有成就感的。

rar 文件大小：52.79KB