javascript 使用konvajs在画布上渲染gif时，像素无法正确渲染

n53p2ov0 于 2023-03-28 发布在 Java

关注(0)|答案(1)|浏览(342)

当我使用konvajs将GIF添加到HTML画布时，GIF的许多像素都没有正确呈现。
https://konvajs.org/docs/sandbox/GIF_On_Canvas.html#page-title 这是我使用konvajs实现在HTML画布上呈现GIF的文档，在这里我使用了来自Wikipedia GIF的GIF链接，而不是文档代码中第49行的“/assets/yoda.gif”
来自Wikipedia的GIF链接：“https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Rotating_earth_%28large%29.gif/200px-Rotating_earth_%28large%29.gif“
将上述URL替换为“/assets/yoda.gif”
我期望添加gif到画布。它是添加，但它的毛刺

JavaScript

来源：https://stackoverflow.com/questions/75854409/pixels-are-not-rendered-properly-when-rendering-gif-on-canvas-using-konvajs

1条答案

按热度按时间

gcuhipw91#

您正在使用的gif文件是一个动画gif。打开链接时可以看到。要在HTML5画布上使用动画gif，您可以使用giffer.js库。请参阅Konva官方文档中的此页面以获取示例：https://konvajs.org/docs/sandbox/GIF_On_Canvas.html
下面是在文档页面被删除的情况下的代码。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@8.4.3/konva.min.js"></script>
    <script src="https://unpkg.com/gifler@0.1.0/gifler.min.js"></script>
    <meta charset="utf-8" />
<title>Konva GIF Demo</title>
<style>
  body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #f0f0f0;
  }
</style>
</head>

<body>
<div id="container"></div>
<script>
  var width = window.innerWidth;
  var height = window.innerHeight;

  var stage = new Konva.Stage({
    container: 'container',
    width: width,
    height: height,
  });

  var layer = new Konva.Layer();
  stage.add(layer);

  var canvas = document.createElement('canvas');
  // use external library to parse and draw gif animation
  function onDrawFrame(ctx, frame) {
    // update canvas size
    canvas.width = frame.width;
    canvas.height = frame.height;
    // update canvas that we are using for Konva.Image
    ctx.drawImage(frame.buffer, 0, 0);
    // redraw the layer
    layer.draw();
  }

  gifler('/assets/yoda.gif').frames(canvas, onDrawFrame);

  // draw resulted canvas into the stage as Konva.Image
  var image = new Konva.Image({
    image: canvas,
  });
  layer.add(image);
</script>

赞(0）回复(0）举报 2023-03-28

我来回答

javascript 使用konvajs在画布上渲染gif时，像素无法正确渲染

1条答案

相关问题

热门标签

最新问答