移动端 H5 生成图片：长按保存带二维码，骚操作一把

如果你是一位移动端 H5 开发人员，那么你可能会遇到过这样的需求：在 H5 页面中生成一张图片，当用户长按保存时，图片会自动带有一个二维码。这个需求乍一看很简单，但实际操作起来却有点棘手。

为了实现这个需求，我们需要利用 HTML5 中的 canvas 元素。canvas 是一种可以动态绘制图形和图像的元素，我们可以在其中绘制一张图片，然后将它导出为一个 base64 字符串。

接下来，我们将生成的 base64 字符串传递给一个服务器端脚本，该脚本负责生成二维码并将其合并到图片中。最后，我们返回合并后的图片，用户长按即可保存带二维码的图片。

具体实现步骤如下：

1. 在 H5 页面中创建一个 canvas 元素。
2. 使用 canvas 的 getContext('2d') 方法获取一个绘图上下文。
3. 使用绘图上下文绘制一张图片。
4. 使用 canvas.toDataURL() 方法将图片导出为一个 base64 字符串。
5. 将 base64 字符串发送给服务器端脚本。
6. 服务器端脚本生成二维码并将其合并到图片中。
7. 返回合并后的图片。
8. 在 H5 页面中显示合并后的图片。

需要特别注意的是，由于浏览器限制，在 H5 页面中无法直接保存图片。因此，我们需要将图片导出为一个 data:image/png;base64 的字符串，然后通过 location.href 将其下载到本地。

不严谨的源码：

<canvas id="canvas"></canvas>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 绘制图片
ctx.drawImage(image, 0, 0);

// 获取 base64 字符串
const base64 = canvas.toDataURL();

// 发送请求
fetch('/generate-qr-code', {
  method: 'POST',
  body: JSON.stringify({ base64 }),
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(res => res.json())
.then(data => {
  // 显示合并后的图片
  canvas.src = data.qrCodeImage;
})
.catch(error => {
  console.error(error);
});