ウェブページの内容を画像として表示

需要は、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