網頁內容轉圖片展示

需求是將 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