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

2024年9月27日70

AI 翻訳

この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示

AI が生成した要約

要求は、Vueの詳細ページを画像として表示し、テキストデータのスクレイピングを防ぐことです。 ### 思路 HTMLをキャンバスに変換し、キャンバスを画像に変換します。 ### 解決策 `html2canvas`ライブラリを使用します。以下は、HTMLをBase64形式の画像に変換する関数と、キャンバスオブジェクトを返す関数の実装です。 ```javascript import html2canvas from "html2canvas"; 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; } 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; // キャンバスオブジェクトを返す } ``` Base64形式に変換した後、`img`の`src`属性に設定することで表示できます。

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