Canvas npm package v2.8.0 图像在尝试 drawImage 时像素化，如何修复？

Question

您好，我正在使用 npm package canvas I am getting an issue while drawing another image on my background the image that I am trying to load is from an API source so its an URL the issue I am having is when I load that image its becoming greenish here is the image link 注意我正在使用 node.js 并且我尝试加载的图像大小是 200px x 200px 我做不知道为什么第二张图片会这样，这是我的应用程序的代码。

                    const loadImage = await Canvas.loadImage(data.clan.badgeUrls.medium)
            
                    const canvas = Canvas.createCanvas(755, 485)

                    const context = canvas.getContext('2d');

                    const backGroundImg = await Canvas.loadImage("https://media.discordapp.net/attachments/662341843861766164/845700894972706816/welcome-image.png")

                    context.drawImage(backGroundImg, 0, 0, canvas.width, canvas.height); 
                  
                    context.stroke();

                    context.strokeStyle = 'white'

                    context.strokeRect(30, 45, 690, 400);
                   
                    context.drawImage(loadImage, 60, 45);

请告诉我如何解决这个问题？提前致谢

Answer 1

我在将节点 canvas 更新到较新版本时遇到了同样的问题。对我来说，通过执行以下命令从源代码再次构建节点 canvas 后问题得到解决：npm install --build-from-source

Canvas npm package v2.8.0 图像在尝试 drawImage 时像素化，如何修复？

Canvas npm package v2.8.0 image getting pixelated when trying to drawImage , How to fix?

javascript

canvas

node.js