javascript - 请问我有一个h5页面，需要在上面加个下载按钮，直接把这整个h5页面，保存为图片，存到手机相册中？

Question

请问如何实现，有什么比较好的插件之类的吗？

Answer 1

这个需要用html2canvas和jsPDF，我之前用这个处理过pc端的，想来手机也可以，您可以看下

https://segmentfault.com/q/1010000042640058

Answer 2

1）可以参考使用这个 html2canvas
2）注意事项是，大量图片记得是允许跨域访问的。
3）部分CSS样式，记得查看支持，本质就是canvas渲染出来。

这个是我最近的一次项目用到的 html2canvas项目实践

Answer 3

你可以使用 html2canvas 和 jsPDF 这两个 JavaScript 库来实现你的需求。

html2canvas 是一个库，可以将 HTML 元素转换为 canvas 元素，jsPDF 可以创建 PDF 文档并将它们保存到用户的设备上。然而，要注意的是，由于隐私和安全问题，浏览器通常不允许直接将 canvas 内容保存到用户的相册。这个方案更适用于将页面内容打印成 PDF 文件，或者在浏览器中进行截图。

下面是一个简单的例子：

html2canvas(document.body).then(function(canvas) {    var imgData = canvas.toDataURL('image/png');    var doc = new jsPDF();    doc.addImage(imgData, 'PNG', 0, 0);    doc.save('download.pdf');});

这段代码首先使用 html2canvas 将整个 body 转换为 canvas，然后使用 toDataURL 方法将 canvas 转换为图片数据（base64编码）。然后，使用 jsPDF 的 addImage 方法将图片添加到 PDF 文档中，最后使用 save 方法将 PDF 文件保存到用户的设备上。

如果你希望直接保存为图片，你可以尝试使用 canvas.toBlob 方法，然后使用 URL.createObjectURL 方法创建一个 URL，这个 URL 可以用来下载图片。然而，这个方法可能因为浏览器的安全限制而无法在所有情况下工作。你可能需要用户手动进行截图或者使用浏览器插件来实现这个功能。