node-html-to-image制作英文单词学习卡片

最新推荐文章于 2025-11-25 13:41:37 发布

原创最新推荐文章于 2025-11-25 13:41:37 发布 · 426 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#html #学习 #javascript

一、基本说明

上一篇文章介绍了node-html-to-image介绍及功能演示简单介绍了node-html-to-image的功能
本篇根据上述文章的介绍，用node-html-to-image实现制作英文单词学习卡片

二、制作步骤

1、设计思路

卡片尺寸：320×480像素

上部分：英文单词 + 音标

下部分：中文释义+例句

简洁美观的界面，适合学习使用

2、代码实现

单词数据

const vocabularyWords = [
  { word: 'Serendipity', phonetic: /ˌserənˈdɪpəti/, chinese: '意外发现美好事物的能力',example:"Traveling is full of serendipity, the joy of discovering something by chance" },
  { word: 'Ephemeral', phonetic: /ɪˈfemərəl/, chinese: '短暂的，转瞬即逝的' ,example:"Beauty is ephemeral, but memories last forever"},
  { word: 'Resilience', phonetic: /rɪˈzɪl.i.əns/, chinese: '恢复力，适应力' ,example:"Her resilience in the face of adversity was admirable"}
];

卡片上下两部分显示风格

 .card-top {
     min-height: 40%;
     max-height: 60%;
     overflow-y: auto;
     background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 20px;
     text-align: center;
     color: white;
 }
 .card-bottom {
     height: 50%;
     background:linear-gradient(135deg, #c2e9fb, #a1c4fd);
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 20px;
     text-align: center;
     color: white;
 }

执行主程序

    try {
      await nodeHtmlToImage({
        html: cardHtml,
        output: outputPath,
        transparent: false,
        quality: 100,
        puppeteerArgs: {
          args: ['--no-sandbox', '--disable-setuid-sandbox']
        }

      });
      console.log(`成功生成卡片: ${outputPath}`);
    } catch (error) {
      console.error(`生成卡片时出错: ${error}`);
    }