如何导出 Canva Render 有修改 CSS 的 GIF

Question

我正在使用 p5.js 制作 GIF 动画，但在导出时遇到问题。
我通过将这些 css 属性添加到 Canva (140*140) 来对我的动画进行像素化效果：

image-rendering: pixelated;
width:500px;
height:500px;

我的问题是我无法使用我添加的属性导出此 Canva。（我正在使用 CCapture）
我的 gif 是 140x140，没有像素化效果。

如何获得我需要的效果图？

Answer 1

您可以为 HTML 元素设置的宽度和高度之间存在差异，例如<canvas width='140' height='140'> 和 CSS 宽度和高度属性。

前者定义 canvas - 140x 140 在本例中的实际大小。

如果我们现在将 CSS 宽度和高度设置为偏离 HTML 元素的宽度和高度，例如<canvas width='140' height='140' style='width: 500px; height:500px;'> canvas 的实际像素大小没有变化 - 它保持 140 x 140 像素。 CSS 属性仅控制浏览器内元素的 displayed 大小，这意味着 140 x 140 被简单地拉伸到 500 x 500。

因此，如果您获得 canvas 的实际像素数据 - 用于导出到 gif/png - 最终图像将具有 canvas 的原始尺寸 - 而不是渲染后的尺寸。

虽然修复非常简单。不要直接使用源 canvas 进行导出，而是在第二个 canvas 上绘制它的内容，大小是你想要的分辨率。

要强制 'export' canvas 不使用任何 filtering/smoothing，您需要将其上下文的 imageSmoothingEnabled 属性设置为 false。

这是一个示例（您可以右键单击并保存两张图片以查看不同之处）：

var ctx = document.getElementById('canvas').getContext('2d');

var image = new Image();
image.onload = function() {
  ctx.drawImage(image, 0, 0);

  let sourceCanvas = document.getElementById("canvas");
  let virtualWidth = parseInt(getComputedStyle(sourceCanvas).width);
  let virtualHeight = parseInt(getComputedStyle(sourceCanvas).height);
  var canvas = document.getElementById("exportCanvas");
  canvas.width = virtualWidth;
  canvas.height = virtualHeight;
  canvas.getContext('2d').imageSmoothingEnabled = false;
  canvas.getContext('2d').drawImage(sourceCanvas, 0, 0, virtualWidth, virtualHeight);
}

image.src = 'https://mdn.mozillademos.org/files/12640/cat.png';

canvas {
  width: 500px;
  height: 500px;
}

<span>Rendered canvas</span><br>
<canvas id="canvas" width="140" height="140"></canvas><br>
<span>Export canvas</span><br>
<canvas id="exportCanvas"></canvas>

如何导出 Canva Render 有修改 CSS 的 GIF

How to export Canva Render has GIF with CSS modification

javascript

canvas

html5-canvas

p5.js