How can I "fake" a url to an html page from an html string?-CodePudding

On my React website, I'd like to generate an image from an html string. I've found html-to-image which seems stable and popular, but it requires a URL to the page of which I want to take a screenshot of. How can I generate a "fake" URL to give it? The HTML string I have is basically a design of the image I want but the content depends on user input.

EDIT: (added the HTML string)

This is my HTML string:

<!DOCTYPE html> <html> <body> <div style="width:500px;margin:0px;padding:0px;background-color:white' \
         ';"><div> <div style="padding:50px"> <p ' \
         'style="color:#9F9F9F;font-size:13px;font-family:verdana;margin-top:0px">VARIABLEVARIABLE</p> <p ' \
         'style="color:#3F3F3F;font-size:26px;font-weight:900;margin-top:0px;margin-bottom:18px;font-family' \
         ':verdana">VARIABLEVARIABLE</p> <p style="color:#3F3F3F;font-size:15px;font-weight:500;margin-top:0px;font-family' \
         ':verdana">VARIABLEVARIABLE</p> </div> <div style="width:100%;height:10px;background-color:#EFF5F8;"></div><div ' \
         'style="padding:50px"> <p style="color:#9F9F9F;font-size:13px;font-family:verdana">VARIABLEVARIABLE</p> <p ' \
         'style="color:#3F3F3F;font-size:15px;font-weight:500;margin-top:0px;font-family:verdana">VARIABLEVARIABLE</p> ' \
         '</div></div> <div style="width:100%;height:55px;background-color:#313131;margin-right:0px;margin-left' \
         ':0px;line-height:55px;"> <p style="color:#ffffff;font-size:15px;font-weight:500;font-family:verdana' \
         ';margin-left:50px">VARIABLEVARIABLE</p> </div> </div> </body> </html>

So I get data fom the server, then replace where I wrote VARIABLEVARIABLE with some of the data and I want to present it to the user as an image.

EDIT 2 : Reading the comment from @programoholic I think that he's right and I got it wrong. I kept seeing dataUrl but I understand now that it's not an actual URL that needs to be passed, but just a reference to the node in which the HTML exists. I'm still unsure how to approach this, but it does change the question. I'll try to set the html to the node once I get the data and then take a snap of that, maybe that'll work.

CodePudding user response：

html-to-string doesn't require any url. Instead you can use the useRef to select the node and then generate the html content as an image like below :

import React, { useRef, useCallback } from 'react';
import './style.css';
import { toPng } from 'html-to-image';

export default function App() {
  const ref = useRef();

  const onButtonClick = useCallback(() => {
    if (ref.current === null) {
      return;
    }

    toPng(ref.current, { cacheBust: true })
      .then((dataUrl) => {
        const link = document.createElement('a');
        link.download = 'my-image-name.png';
        link.href = dataUrl;
        link.click();
      })
      .catch((err) => {
        console.log(err);
      });
  }, [ref]);

  return (
    <div ref={ref}>
      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :) p</p>
      <button onClick={onButtonClick}> download png </button>
    </div>
  );
}

Here is the. : Stackblitz

CodePudding user response：

html-to-image wants base64 url , so you can create image to base64 with javascript code.

    const base64Convertor = (file) => {
    return new Promise((resolve, reject) => {
      const fileReader = new FileReader();
      fileReader.readAsDataURL(file);

      fileReader.onload = () => {
        resolve(fileReader.result);
      };

      fileReader.onerror = (error) => {
        reject(error);
      };
    });
  };

CodePudding user response：

You can add some JavaScript to replace the contents of some HTML elements with the value of your variable, which can be taken from a URL parameter.

Then pass the URL with the value in the parameter. Eg: /generate-image.html?variable=Hello

// Get variable from URL query params
const urlSearchParams = new URLSearchParams(window.location.search);
const variable = urlSearchParams.get('variable') || 'default value';

// Update all HTML elements with data-variable
const elements = document.querySelectorAll('[data-variable]');
for (element of elements) {
  element.textContent = variable;
}

<h1 data-variable="true"></h1>
<p data-variable="true"></p>