网页内容转图片展示

需求是将 vue 详情页，转换成图片展示，避免机器爬取文本数据，增加爬虫解析难度

思路#

将 html 转换为 canvas, 在将 canvas 转换为图片

解决方案#

使用 html2canvas 库来实现

import html2canvas from "html2canvas";

/**
 * 将html转换成base64返回
 * @param {*} target
 * @param {*} width
 * @param {*} height
 * @returns
 */
export async function htmlToBase64(target, width, height) {
  const element = document.querySelector(target);
  const copyElement = element.cloneNode(true);
  element.style.width = width;
  const canvas = await html2canvas(element);
  element.style.width = copyElement.style.width;
  const base64Data = canvas.toDataURL("image/png");
  return base64Data;
}

/**
 * 将html转换成Canvas返回
 * @param {*} target
 * @param {*} width
 * @param {*} height
 * @returns
 */
export async function htmlToCanvas(target, width, height) {
  const element = document.querySelector(target);
  const copyElement = element.cloneNode(true);
  element.style.width = width;
  const canvas = await html2canvas(element);
  element.style.width = copyElement.style.width;
  return canvas; // 返回canvas对象
}

我们采用转换为 base64 返回，然后将 base64 设置为 img 的 src 属性就可以

此文由 Mix Space 同步更新至 xLog
原始链接为 http://www.sroxck.top/posts/fontend/html2canvas