Generating Dynamic Posters with html2canvas in Web Pages

In many community platforms, sharing dynamic posters that change with content is common; html2canvas enables rendering such dynamic HTML into static images directly in the browser.

html2canvas is an HTML renderer that captures the DOM and its styles into a canvas element, creating a screenshot without server‑side rendering, but it does not produce a true pixel‑perfect screen capture and is unsuitable for Node.js environments.

Install the library with npm install html2canvas and import it in the page using import html2canvas from 'html2canvas' , then call the API as needed.

Define the poster structure in HTML, for example:

<view class="html2canvas">
  <view class="poster_title">Poster Title</view>
  <view class="img_box">
    <img class="img_case" src="..." alt="" />
  </view>
  <view class="poster_title" @click="getPoster()">Generate Share</view>
</view>

Apply CSS to style the poster, such as padding, text alignment, flex layout for the image box, and size specifications for the image.

In UniApp, distinguish between normal script blocks and renderjs blocks; the latter runs in the view layer and can directly manipulate the DOM.

The core function to generate the poster is:

export default {
  methods: {
    async getPoster() {
      try {
        const dom = document.querySelector('.html2canvas');
        const canvas = await html2canvas(dom, {
          width: dom.offsetWidth,
          height: dom.offsetHeight,
          logging: true,
          useCORS: true,
          scale: 4,
          dpi: 600,
        });
        const base64 = canvas.toDataURL('image/jpeg', 1);
        console.log('Generated image', base64);
      } catch (error) {
        console.log(error);
      }
    }
  }
}

To download the generated image, create an a element, set its href to the base64 data URL, assign a filename via download , and trigger a click:

let a = document.createElement('a');
a.href = base64;
a.download = "posterName.png";
a.click();

Important notes: multiple script tags are normal in UniApp; use renderjs for view‑layer logic. Use img tags instead of image tags to ensure scale and dpi settings take effect. Some advanced CSS properties (e.g., background‑blend‑mode, filter, mix‑blend‑mode, object‑fit, etc.) are not fully supported by html2canvas.

In summary, html2canvas converts defined HTML structures into canvas images, allowing you to generate shareable posters, but be aware of its limitations regarding CSS support and server‑side usage.