H5中的「保存页面为图片」的那些坑

2024-02-03 00:26:30

H5 页面图片下载的曲折历程

作为一名前端工程师，我最近被赋予了一个看似简单的任务：在 H5 页面中添加一个“保存页面为图片”功能。然而，这项看似简单的任务却让我走上了一个曲折的旅程，充满了意外的障碍和创新的解决方案。

HTML2Canvas 初试水

一开始，我天真地以为可以使用流行的 HTML2Canvas 库来完成这项任务。该库允许将 HTML 元素转换为 Canvas 元素，然后将其导出为图片。我兴高采烈地编写了如下代码：

html2canvas(document.body).then(function(canvas) {
  var imgData = canvas.toDataURL('image/png');
  var a = document.createElement('a');
  a.href = imgData;
  a.download = '医生二维码名片.png';
  a.click();
});

然而，当我在微信中打开 H5 页面时，这段代码却罢工了。经过一番排查，我发现微信禁用了某些 JavaScript API，包括 HTML2Canvas。

Iframe 和 Canvas 的曲折

为了解决这个问题，我尝试了使用 iframe 加载 H5 页面，然后在 iframe 中使用 HTML2Canvas。然而，iframe 会增加页面的加载时间，并可能带来安全问题。

我也尝试使用 Canvas 元素直接绘制 H5 页面的内容。然而，Canvas 无法直接绘制 H5 页面的内容，需要进行一些特殊处理，这让我头疼不已。

第三方库的雷区

最后，我尝试使用第三方库来实现这一功能。然而，这些库往往比较复杂，并且可能存在兼容性问题。我不得不在兼容性和便利性之间做出艰难的抉择。

截图 API 的曙光

就在我准备放弃时，我灵机一动，想到了一个更简单的解决方案：使用截图 API 截取 H5 页面的内容。

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(document.body, 0, 0);
var imgData = canvas.toDataURL('image/png');
var a = document.createElement('a');
a.href = imgData;
a.download = '医生二维码名片.png';
a.click();