使用 canvas.toDataURL() 导出 png 时禁用抗锯齿答案

【问题标题】：Disable anti-aliasing when exporting a png with canvas.toDataURL()使用 canvas.toDataURL() 导出 png 时禁用抗锯齿
【发布时间】：2018-09-04 13:31:26
【问题描述】：

我有一个画布，可以使用 fabric.js 绘制一些形状。然后我填充这些形状，并使用 context.drawImage() 在另一个画布上绘制它们，然后使用 canvas.toDataURL() 导出到 png。

我已经为我绘制的画布和我导出为 png 的画布关闭了 enableRetinaScaling 和 imageSmoothingEnabled。

我生成的 png 在形状边缘有不同颜色的像素，并且似乎是抗锯齿或模糊的。有没有办法禁用它并使每个像素的边框颜色相同？我知道这会导致边缘不太光滑，这很好。

const canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;

const drawingCanvas = new fabric.Canvas(canvas, {
  width: 150,
  height: 150,
  backgroundColor: 'transparent',
  selection: false,
  enableRetinaScaling: false,
  imageSmoothingEnabled: false,
});

let polygon = new fabric.Polygon([
  {  x: 50,  y: 100 }, 
  {  x: 70,  y: 10 }, 
  {  x: 90,  y: 100 }, 
], {
  stroke: 'green',
  fill: 'green',
  selectable: false,
  perPixelTargetFind: true,
  hoverCursor: 'cursor'
});

drawingCanvas.add(polygon);
drawingCanvas.renderAll();

link = document.getElementById('download');
link.setAttribute("href", canvas.toDataURL());
link.setAttribute("download", "example.png");

<body>
  <a id="download"><button>Download</button></a>
  <canvas id="canvas" style="border: solid red 1px" />
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.5/fabric.js"></script>

png 的特写，显示不同的像素阴影

【问题讨论】：

您在 toDataURL 中使用encoderOptions 吗？ developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/…
如果你能用一个简单的形状创建一个最小的代码 sn-p 来显示你的问题，那就太好了
@HelderSepu - 对于默认的 png，编码器选项似乎什么都不做。它只是说它会影响替代格式。
这是一个密码笔。如果您同时下载了小png和大png，当您放大形状时，您可以看到像素色差。我希望所有像素都是相同的绿色阴影，或者是透明的。 codepen.io/carter485/pen/ajroNO?editors=1011
@VictorStoddard - 试过这个，仍然可以看到形状边缘周围的像素颜色差异。试试codepen，看看你能不能让所有的像素都变成相同的阴影。

标签： javascript canvas fabricjs

【解决方案1】：

这似乎是由用于在画布中绘制线条的算法引起的，我认为我们没有办法改变它，唯一的选择是使用不同的算法自己绘制所有内容，例如：
https://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm

在您的示例中，您使用的是 fabric.js，但这也发生在最基本的线条绘制形式中，以下是示例：

const canvas = document.getElementById('canvas');
canvas.width = canvas.height = 50;
let ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false
ctx.mozImageSmoothingEnabled = false;

ctx.translate(0.5, 0.5)
ctx.beginPath();
ctx.moveTo(0, 10);
ctx.lineTo(10, 10);
ctx.lineTo(30, 30);
ctx.lineTo(40, 10);
ctx.stroke();
ctx.closePath();

link = document.getElementById('download');
link.setAttribute("href", canvas.toDataURL());
link.setAttribute("download", "example.png");

<body>
  <a id="download"><button>Download</button></a><br>
  <canvas id="canvas" style="border: solid red 1px" />
</body>

【讨论】：

【解决方案2】：

这是一个可能的解决方案。您无法从画布中删除别名，至少不在规范中，并且不受您的控制。

但您可以在导出像素后对其进行操作。

输出是：

但它不适用于重叠的形状。

const canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.imageSmoothingEnabled = false;

const drawingCanvas = new fabric.Canvas(canvas, {
  width: 150,
  height: 150,
  backgroundColor: 'transparent',
  selection: false,
  enableRetinaScaling: false,
  imageSmoothingEnabled: false,
});

let polygon = new fabric.Polygon([
  {  x: 50,  y: 100 }, 
  {  x: 70,  y: 10 }, 
  {  x: 90,  y: 100 }, 
], {
  stroke: 'green',
  fill: 'green',
  selectable: false,
  perPixelTargetFind: true,
  hoverCursor: 'cursor'
});

drawingCanvas.add(polygon);
drawingCanvas.renderAll();

function myNewImage() {
  const _canvas = document.createElement('canvas');
  const pixels = drawingCanvas.lowerCanvasEl;
  _canvas.width = pixels.width;
  _canvas.height = pixels.height;
  const ctx = _canvas.getContext('2d');
  ctx.drawImage(pixels, 0, 0);
  const data = ctx.getImageData(0, 0, _canvas.width, _canvas.height);
  const pixelArray = data.data;
  for (let i = 3; i < pixelArray.length; i += 4) {
    if (pixelArray[i] < 128) {
      pixelArray[i] = 0;
    } else {
      pixelArray[i] = 255;
    }
  }
  ctx.putImageData(data, 0, 0);
  return _canvas.toDataURL('image/png');
}

link = document.getElementById('download');
link.setAttribute("href", myNewImage());
link.setAttribute("download", "example.png");

<body>
  <a id="download"><button>Download</button></a>
  <canvas id="canvas" style="border: solid red 1px" />
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.5/fabric.js"></script>

【讨论】：