Twitter 机器人会生成带有您的引言的图像!

2025-06-10

Twitter 机器人会生成带有您的引言的图像!

在推特上,我经常看到有人发一些励志、搞笑甚至有点傻气的名言。我琢磨着,如果有个推特机器人能生成一张包含他们名言的图片会怎么样?就像这样:

从 Stack Overflow 复制粘贴

所以我决定建一个。

除了“将此脚本复制到页脚部分”或“将此脚本包含在 head 标签中”之外,我没有使用 Javascript 创建应用程序的经验,为了获得经验和学习 Javascript,我选择使用 Javascript 构建这个机器人。

值得庆幸的是, Daniel Shiffman的这个视频教程对我的入门帮助很大。

(另请查看精彩播放列表

设置 Twitter 应用程序

该设置与此非常相似,因此您可以按照此帖子来设置 Twitter 应用程序。😅

监听用户事件

我希望这个机器人在有人引用任何一条推文时能够正常工作。我们将创建一个监听用户事件的流:

const stream = T.stream("user");
stream.on("quoted_tweet", tweetEvent);
Enter fullscreen mode Exit fullscreen mode

如果有人引用了此机器人的任何推文,它将执行tweetEvent回调,这是回调的代码tweetEvent

function tweetEvent(eventMsg) {

  const text = eventMsg.target_object.text;
  const from = `@${eventMsg.source.screen_name}`;
  const twit_id = eventMsg.target_object.id_str;

  if (eventMsg.event === "quoted_tweet") {
    const tweetMedia = imagePath => {
      try {
        var b64content = fs.readFileSync(imagePath, { encoding: "base64" });
        T.post("media/upload", { media_data: b64content }).then(response => {
          var mediaIdStr = response.data.media_id_string;
          var altText = "Image Quote Generated By Quotemakerbot";
          var meta_params = {
            media_id: mediaIdStr,
            alt_text: { text: altText }
          };

          T.post("media/metadata/create", meta_params).then(() => {
            var params = {
              status: `${from}`,
              in_reply_to_status_id: twit_id,
              media_ids: [mediaIdStr]
            };
            T.post("statuses/update", params).then(response => {
              console.log("Successfully post to twitter");

    //some code omitted

Enter fullscreen mode Exit fullscreen mode

tweetMedia只是一个接受图像路径以将图像发布到 Twitter 的函数,下面是执行图像处理的“实际”代码:

exports.processImage = async (from, text) => {
  const param = tweetUtil.getUnsplashParam(text)
  options = {
    url: `https://source.unsplash.com/1024x576/${param}`,
    dest: `${from}.jpg`
  }
  const { filename, image } = await download.image(options)
  const filteredImage = await ImageProcessor.filterImage(filename,`${from}-filtered.jpg`)
  setTimeout(function() {
  ImageProcessor.drawImageAndTextToCanvas(filteredImage,{
      text:tweetUtil.cleanAndTidyTweet(text),
      imageName: from+`-quoted.jpg`,
      username: from
    })
  }, 1500);
  return `${from}-quoted.jpg`
}
Enter fullscreen mode Exit fullscreen mode

说实话,我无法解释代码的每个部分,这个机器人是 9 个月前制作的,当我再次阅读代码时,我的感觉是:

我没有记忆

但这个机器人的一般工作方式如下:

  1. 有人引用了这个机器人的推文。
  2. 这个机器人会从 Unsplash 随机或按指定类别下载图片。例如,我添加了 -coding 选项,它就会从 Unsplash 下载指定编码类别的图片。图片如下:原始图像
  3. 然后,图像的亮度和对比度稍微下降,以使文本更具可读性。过滤后的图像
  4. 将图像和文本绘制到画布上完成的图像
  5. 将其发布到 Twitter!

就是这样,试试看!@quotemakerbot

单击此处查看可用选项列表,如果您不添加选项,背景图像将来自 Unsplash 上的随机类别。

使用示例

推文格式:-option(您的引言)

如何

结果

结果

PS:有时这个机器人不能按预期工作。🙇

鏂囩珷鏉ユ簮锛�https://dev.to/nirzaq/twitter-bot-that-generates-an-image-with-your-quote-4m4h
PREV
通过制作多人游戏来学习 Socket.io 的基础知识 先决条件 项目要点 资源
NEXT
JavaScript/Node 最佳实践