Question 58289 in Telegram API Question posted in
A comprehensive official documentation can be found here.

Is there any ways to send a canvas item by using telegram api?

Is there any possible ways to get my canvas by blob and send it using telegram api directly? I tried to convert the canvas into a url but telegram still cannot send it.

My system is about sending emergency message. When the alarm was triggered, the live graph will be send to a telegram group to notify the members. But what is troubling me is telegram only can send photo by using url or upload from local.

Below is my code example:

exportTelegramPNG(){

      const bot = {
        TOKEN:"telegram bot token",
        chatID:"telegram bot chatID",
      }

      const filename = this.state.stationRecord["StationName"]+'_'+this.state.currentDate;
      html2canvas(document.getElementById(this.chart2.current.chart.container.id)).then(function (canvas) {
      
      if (canvas) {
        canvas.toBlob(function (blob) {
          
          const newImg = document.createElement('img');
          const url = URL.createObjectURL(blob);

          newImg.onload = () => {
          // no longer need to read the blob so it's revoked
          URL.revokeObjectURL(url);
          };

          newImg.src = url;
          document.body.appendChild(newImg);

          fetch(`https://api.telegram.org/bot${bot.TOKEN}/sendPhoto?chat_id=${bot.chatID}&photo=${newImg}`, {
            method:"GET"
            })
        });
        
      }
    });
  }

Here is the error log in console.

GET https://api.telegram.org/bot${bot.TOKEN}/sendPhoto?chat_id=${bot.chatID}&photo=[object%20HTMLImageElement] 400

Thank you for anyone who gives suggestion and helps.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    my code worked as below:

    exportTelegramPNG(){

  const bot = {
    TOKEN: "Telegram bot token",
    chatID:"telegram bot chatID",
  }

  html2canvas(document.getElementById(this.chart2.current.chart.container.id)).then(function (canvas) {
  
  if (canvas) {
    canvas.toBlob(function (blob) {

      var caption = "Report"+'_'+this.state.currentDate;
      var formData = new FormData();
      formData.append('photo', blob);
      formData.append('caption', caption);

      var request = new XMLHttpRequest();
      request.open('POST', `https://api.telegram.org/bot${bot.TOKEN}/sendPhoto?chat_id=${bot.chatID}`);
      request.send(formData);

    });
  }
});

    }

    Now my code will be able to get the data from live chart and send it to telegram group after I click the button.

    Thanks to Graficode and Tural who help me and giving suggestion. Thank you.


  2. 0

    Telegram api only accept either a url to an image or file/image upload. And you can use any blob data for sending without temporary file.

    Login or Signup to reply.
  3. 0

    I modified the code a bit to make it work for me.

    function sendCanvas(obj) {
  const bot = {
    TOKEN: '5237151266:AAEqn8j4mRDnXxvcApmHJMzaXRsoIhvGKTY',
    chatID:'-1001719430367',
  }
  
  var canvas = document.getElementById(obj);
  if (canvas) {
    canvas.toBlob(function (blob) {
      var caption = 'Summary Chart';
      var formData = new FormData();
      formData.append('photo', blob);
      formData.append('caption', caption);
      var request = new XMLHttpRequest();
      request.open('POST', 'https://api.telegram.org/bot' + bot.TOKEN + '/sendPhoto?chat_id=' + bot.chatID);
      request.send(formData);
    });
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search