Display Image generated by HTML2Canvas

Need help
1

Hi, I have an app setup so that a user insert a tweet and if generates the tweet into groups I have created.

image
image1856×916 72.4 KB

When I click the Download button,

I have a Javascript script that calls Canvas2HTML and download the tweet as an image.
// Get the card elements
var card1_1 = document.getElementById(‘card1_1’);
var card1_2 = document.getElementById(‘card1_2’);

// Get the elements to hide
var chevronRight1 = document.getElementById('chevron_right_1');
var chevronLeft1 = document.getElementById('chevron_left_1');

// Hide the elements
chevronRight1.style.display = 'none';
chevronLeft1.style.display = 'none';

// Capture card1_1
html2canvas(card1_1, {useCORS: true, scale: 6}).then(function(canvas1) {
  // Show the elements again
  chevronRight1.style.display = '';
  chevronLeft1.style.display = '';

  // Convert the canvas to a data URL and download the image
  var card1_1Img = canvas1.toDataURL("image/png");
  var link1 = document.createElement("a");
  link1.download = "card1_1_birdsnap.png";
  link1.href = card1_1Img;
  document.body.appendChild(link1);
  link1.click();
  document.body.removeChild(link1);

  // Hide the elements again for card1_2
  chevronRight1.style.display = 'none';
  chevronLeft1.style.display = 'none';

  // Capture card1_2
  html2canvas(card1_2, {useCORS: true, scale: 6}).then(function(canvas2) {
// Show the elements again
chevronRight1.style.display = '';
chevronLeft1.style.display = '';

// Convert the canvas to a data URL and download the image
var card1_2Img = canvas2.toDataURL("image/png");
var link2 = document.createElement("a");
link2.download = "card1_2_birdsnap.png";
link2.href = card1_2Img;
document.body.appendChild(link2);
link2.click();
document.body.removeChild(link2);
  });
});

Does anyone know how I can fill in the black box with the actual image generated to show on the page?

2

This topic was automatically closed after 70 days. New replies are no longer allowed.