HTML 绘制成图片方案

一、简介

HTML 是一种标记语言，用于描述网页的结构和内容。然而，HTML 本身并不具备绘制图形的能力。为了实现将 HTML 内容绘制成图片，我们需要借助其他工具或库。

二、方案

使用图形库，如 Canvas 或 SVG。Canvas 是 HTML5 引入的一种用于绘制 2D 图形的 API，而 SVG 是一种用于描述 2D 图形的 XML 语言。通过使用 Canvas 或 SVG，我们可以在网页上绘制图形，并将其转换为图片。

注意：

1. 涉及到保存图片的，站内采用原生通讯桥的方式进行通讯通过 App 进行图片的分享和保存，站外统一采用长按保存的方式进行保存图片
2. 长按保存图片必须要使用 <img> 标签来展示图片，并且不能有存在设置 css 属性为：-webkit-touch-callout: none;

三、实现

1. 通过图形库将 HTML 转换成图片的库社区十分的丰富，这里提供一种较为稳定，经过验证的 "html2canvas": "1.0.0-alpha.12" 第三方库，但这里仅做推荐，有更好的依旧可选择更好的，以下通过一小段实现逻辑案例进行展示：

<template>
<div class="hide-shared" ref="shareDialogRef">
  <img class="shard-bg" :src="shardBg" alt="shard background" />
  <div :class="shareQrcodeClass">
    <div :class="{ 'share-code-right-qrcode': true, 'is-sa': isSaLang }" ref="qrCodeRef"></div>
  </div>
</div>
</template>

<script>
const html2canvas = await this.getHtml2canvas();
const canvas = await html2canvas.default(shareDialogRef, {
    backgroundColor: null,
    useCORS: true,
    logging: false,
    scale: 3,
    dpi: window?.devicePixelRatio,
});
// --------- 图片生成成功 ---------
const base64 = canvas.toDataURL();
</script>

这里注意的是需要监听 shareDialogRef 确定绘制完成后再进行绘图，采用监听方式而非延迟方式。

四、优化：

1. 绘图操作应该在页面加载的时候就开始
2. 绘图内容中包含的 img 应该先进行预加载
3. 状态变更导致绘制内容变化应该采用 v-show 而非是 v-if

五、总结

在此总结了一下将 HTML 绘制成图片进行分享的经验 ~