Breaking News: Grepper is joining You.com. Read the official announcement!

can i insert html div with texts in canvas and that can be downloadable

Rihal Ahmed answered on July 1, 2023 Popularity 1/10 Helpfulness 1/10

answer can i insert html div with texts in canvas and that can be downloadable

can i insert html div with texts in canvas and that can be downloadable

Comment

<template>
  <div>
    <div ref="htmlContent">
      <!-- HTML content with div and text -->
      <div>
        <h1>Example Text</h1>
        <p>This is a div with some text content.</p>
      </div>
    </div>
    <button @click="downloadCanvas">Download Canvas</button>
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
import html2canvas from 'html2canvas';

export default {
  methods: {
    async downloadCanvas() {
      const canvas = this.$refs.canvas;
      const htmlContent = this.$refs.htmlContent;

      // Convert HTML content to an image
      const canvasImage = await html2canvas(htmlContent);

      // Clear the canvas
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // Set canvas size to match the image size
      canvas.width = canvasImage.width;
      canvas.height = canvasImage.height;

      // Draw the image onto the canvas
      ctx.drawImage(canvasImage, 0, 0);

      // Trigger download of the canvas image
      const dataUrl = canvas.toDataURL('image/png');
      const link = document.createElement('a');
      link.href = dataUrl;
      link.download = 'canvas_image.png';
      link.click();
    },
  },
};
</script>

Popularity 1/10 Helpfulness 1/10 Language typescript

Source: chat.openai.com

Tags: canvas html insert typescript

Link to this answer
Share Copy Link

Contributed on Jul 01 2023

Rihal Ahmed

0 Answers Avg Quality 2/10

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

can i insert html div with texts in canvas and that can be downloadable

Contents

More Related Answers

can i insert html div with texts in canvas and that can be downloadable

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.