时间戳

首页 > 解决方案 > Node.js 中内置的动画 gif 的背景图像

javascript - Node.js 中内置的动画 gif 的背景图像

问题描述

我对使用 node.js 以及 express 和 canvas 等软件包非常陌生，所以如果我的代码中有任何明显的错误，并且如果我花一点时间理解任何问题或解决方案，我深表歉意。

我目前正在定制一个版本 - https://github.com/Nooshu/node-countdown-gif。一个画布生成的倒数计时器，用于电子邮件。我的自定义很少，到目前为止我所做的只是加载字体并从 url 添加更多内容以进行查询。

我遇到的问题是，如果可能的话，我想加载外部图像作为计时器后面的背景图像，而不是纯色或渐变背景，看起来应该是可能的，但我只是无法让它工作。

这是生成具有纯色背景的计时器视觉效果的代码块。

if(typeof timeResult === 'object'){
            for(let i = 0; i < this.frames; i++){
                // extract the information we need from the duration
                let days = Math.floor(timeResult.asDays());
                let hours = Math.floor(timeResult.asHours() - (days * 24));
                let minutes = Math.floor(timeResult.asMinutes()) - (days * 24 * 60) - (hours * 60);
                let seconds = Math.floor(timeResult.asSeconds()) - (days * 24 * 60 * 60) - (hours * 60 * 60) - (minutes * 60);

                // make sure we have at least 2 characters in the string
                days = (days.toString().length == 1) ? '0' + days : days;
                hours = (hours.toString().length == 1) ? '0' + hours : hours;
                minutes = (minutes.toString().length == 1) ? '0' + minutes : minutes;
                seconds = (seconds.toString().length == 1) ? '0' + seconds : seconds;

                // build the date string
                let string = [days, 'd ', hours, 'h ', minutes, 'm ', seconds, 's'].join('');

                // paint BG
                ctx.fillStyle = this.bg;
                ctx.fillRect(0, 0, this.w, this.h);

                // paint text
                ctx.fillStyle = this.textColor;
                ctx.fillText(string, this.halfWidth, this.halfHeight);

                // add finalised frame to the gif
                enc.addFrame(ctx);

                // remove a second for the next loop
                timeResult.subtract(1, 'seconds');
            }
        }

我需要在每个循环期间生成这个背景图像，否则每个循环都在顶部的计时器层。我尝试了两种不同的方法来加载外部图像。第一次我根本无法上班，没有图像显示。见方法：

let img = new Canvas(this.w, this.h);
                img.src = 'https://via.placeholder.com/600x200.png';
                img.onload = function(){
                  context.drawImage(img, 0, 0, this.w, this.h);
                }

我的第二种方法取得了更大的成功，但仍然无法让它发挥作用。如果放置在代码中的较早位置（在 for 循环之前），它会成功加载图像但计时器不显示。如果放置在 for 循环中，它会为循环的每次迭代引发以下错误。这是代码块，后面跟着错误。注意：此错误仅在将代码块放在 for 循环中时出现。

   let imgUrl = 'https://via.placeholder.com/'
    loadImage(imgUrl + image + '.png').then(image => {
        context.drawImage(image, 0, 0, 600, 200)

        const buffer = canvas.toBuffer('image/png')
        res.set({ 'Content-Type': 'image/png' });
        res.send(buffer)
    })


Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch()

有没有人能够支持我解决我的问题？

谢谢

标签： javascriptnode.jscanvas

解决方案

我已经想通了。

在我的代码前面是一个初始化函数，它准备我的构建计时器，在这个函数中移动 onload 函数，然后将输出传递给一个允许在上面定义的 for 循环中放置一个 drawImage 函数时按预期工作的编码函数 -

  if (imageBgSrc !== null) {
           let img = new Canvas.Image;
                img.src = imageBgSrc;
                img.onload = function() {
                $this.encode(timeResult, img, cb);
    }
        } else {
            this.encode(timeResult, null, cb);
        }

encode: function (timeResult, image, cb) {

// Other code

if (image !== null) {
                    ctx.drawImage(image, 0, 0, this.width, this.height)
                }
// Other code
}

推荐阅读