How to use convertHtmlToImage method in Cypress

1import html2canvas from 'html2canvas';
2import jsPDF from 'jspdf';
3
4const convertHTMLToPDF = async (html, y) => {
5
6    const canvas = await html2canvas(html, { useCORS: true, y: y || html.offsetTop });
7
8    const imgData = canvas.toDataURL(
9        'image/png');
10    const pdf = new jsPDF('p', 'mm', 'a4');
11    const imgProps = pdf.getImageProperties(imgData);
12    const pdfWidth = pdf.internal.pageSize.getWidth();
13    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
14
15    let pageNumber = 0;
16    const pageheight = pdf.internal.pageSize.height;
17
18    while (pdfHeight > (pageheight * pageNumber)) {
19        if (pageNumber !== 0) {
20            pdf.addPage();
21        }
22        const pos = 0 - (pageheight * pageNumber);
23        pdf.addImage(imgData, 'PNG', 0, pos, pdfWidth, pdfHeight);
24        pageNumber++;
25    }
26
27    return pdf;
28}
29
30const convertHTMLToImage = async (html) => {
31
32    const canvas = await html2canvas(html, { useCORS: true, y: html.offsetTop });
33
34    return canvas.toDataURL(
35        'image/jpg');
36}
37
38export const downloadHelper = {
39    convertHTMLToPDF,
40    convertHTMLToImage
41}
42
43export default downloadHelper;

Source: index.js

import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';

const convertHTMLToPDF = async (html, y) => {

    const canvas = await html2canvas(html, { useCORS: true, y: y || html.offsetTop });

    const imgData = canvas.toDataURL(
        'image/png');
    const pdf = new jsPDF('p', 'mm', 'a4');
    const imgProps = pdf.getImageProperties(imgData);
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

    let pageNumber = 0;
    const pageheight = pdf.internal.pageSize.height;

    while (pdfHeight > (pageheight * pageNumber)) {
        if (pageNumber !== 0) {
            pdf.addPage();
        }
        const pos = 0 - (pageheight * pageNumber);
        pdf.addImage(imgData, 'PNG', 0, pos, pdfWidth, pdfHeight);
        pageNumber++;
    }

    return pdf;
}

const convertHTMLToImage = async (html) => {

    const canvas = await html2canvas(html, { useCORS: true, y: html.offsetTop });

    return canvas.toDataURL(
        'image/jpg');
}

export const downloadHelper = {
    convertHTMLToPDF,
    convertHTMLToImage
}

export default downloadHelper;

1let http = require('http');
2let convertHtmlToImage = require('./convert-html-to-image');
3
4const port = 8080;
5
6http.createServer(function(req, res) {
7  const headers = {
8    'Access-Control-Allow-Origin': '*',
9    'Access-Control-Allow-Headers': 'Content-Type',
10    // 'Content-Type': 'text/html',
11    'Access-Control-Allow-Methods': 'OPTIONS, POST, GET',
12    'Access-Control-Max-Age': 2592000, // 30 days
13    /** add other headers as per requirement */
14  };
15
16  if (req.method === 'OPTIONS') {
17    res.writeHead(204, headers);
18    res.end();
19    return;
20  }
21
22  if (['GET', 'POST'].indexOf(req.method) > -1) {
23
24    if (req.url == '/submitForm') {
25      parseRequestBody(req, res, headers);
26      return;
27    }
28    else {
29      res.writeHead(200, headers);
30      res.end('Request Parsed');
31      return;
32    }
33
34  }
35
36  res.writeHead(405, headers);
37  res.end(`${req.method} is not allowed for the request.`);
38
39}).listen(port);
40
41function convertToImage(data) {
42  let date = new Date();
43  return convertHtmlToImage.convertToPng(data, `output-image-${date.getTime()}`);
44}
45
46function parseRequestBody(req, res, headers) {
47    // parsing request body
48    // At this point, we have the headers, method, url and body, and can now
49    // do whatever we need to in order to respond to this request.
50    const { reqHeaders, reqMethod, reqURL } = req;
51
52    let body = [];
53    req.on('error', (err) => {
54      console.error(err);
55    }).on('data', (chunk) => {
56      body.push(chunk);
57    }).on('end', () => {
58      body = Buffer.concat(body).toString(); // at this point, `body` has the entire request body stored in it as a string
59
60      convertToImage(JSON.parse(body).data).then(response => {
61        headers['Content-Type'] = 'application/json'
62
63        if (response.success) {
64          res.writeHead(200, headers);
65        }
66        else {
67          res.writeHead(500, headers);
68        }
69
70        res.on('error', error => {
71          console.error('Error: ', error)
72        })
73
74        res.end(JSON.stringify(response));
75      });
76    });
77}
78

Source: http-server.js

let http = require('http');
let convertHtmlToImage = require('./convert-html-to-image');

const port = 8080;

http.createServer(function(req, res) {
  const headers = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Headers': 'Content-Type',
    // 'Content-Type': 'text/html',
    'Access-Control-Allow-Methods': 'OPTIONS, POST, GET',
    'Access-Control-Max-Age': 2592000, // 30 days
    /** add other headers as per requirement */
  };

  if (req.method === 'OPTIONS') {
    res.writeHead(204, headers);
    res.end();
    return;
  }

  if (['GET', 'POST'].indexOf(req.method) > -1) {

    if (req.url == '/submitForm') {
      parseRequestBody(req, res, headers);
      return;
    }
    else {
      res.writeHead(200, headers);
      res.end('Request Parsed');
      return;
    }

  }

  res.writeHead(405, headers);
  res.end(`${req.method} is not allowed for the request.`);

}).listen(port);

function convertToImage(data) {
  let date = new Date();
  return convertHtmlToImage.convertToPng(data, `output-image-${date.getTime()}`);
}

function parseRequestBody(req, res, headers) {
    // parsing request body
    // At this point, we have the headers, method, url and body, and can now
    // do whatever we need to in order to respond to this request.
    const { reqHeaders, reqMethod, reqURL } = req;

    let body = [];
    req.on('error', (err) => {
      console.error(err);
    }).on('data', (chunk) => {
      body.push(chunk);
    }).on('end', () => {
      body = Buffer.concat(body).toString(); // at this point, `body` has the entire request body stored in it as a string

      convertToImage(JSON.parse(body).data).then(response => {
        headers['Content-Type'] = 'application/json'

        if (response.success) {
          res.writeHead(200, headers);
        }
        else {
          res.writeHead(500, headers);
        }

        res.on('error', error => {
          console.error('Error: ', error)
        })

        res.end(JSON.stringify(response));
      });
    });
}