Javascript 使用canvas.toDataURL（）导出png时禁用抗锯齿

我有一张画布，我用fabric.js在上面画了一些形状。然后我填充这些形状，并使用context.drawImage（）在另一个画布上绘制它们，以使用canvas.toDataURL（）导出为png

对于我绘制到的画布和导出到png的画布，我已禁用enableRetinaScaling和ImageSmoothInEnabled

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

const canvas=document.getElementById（'canvas'）；
设ctx=canvas.getContext（'2d'）；
ctx.imageSmoothingEnabled=假；
const drawingCanvas=新织物.Canvas（画布{
宽度：150，
身高：150，
背景色：“透明”，
选择：假，
enableRetinaScaling:false，
ImageSmoothInEnabled:错误，
});
让多边形=新结构。多边形([
{x:50，y:100}，
{x:70，y:10}，
{x:90，y:100}，
], {
笔划：“绿色”，
填充：“绿色”，
可选：false，
perPixelTargetFind：对，
鼠标悬停光标：“光标”
});
drawingCanvas.add（多边形）；
drawingCanvas.renderAll（）；
link=document.getElementById（'download'）；
link.setAttribute（“href”，canvas.toDataURL（））；
setAttribute（“下载”，“example.png”）

下载
这似乎是由在画布上绘制线条的算法造成的，我认为我们没有办法改变它，唯一的选择是使用不同的算法自己绘制所有内容，如：


在您的示例中，您使用的是fabric.js，但最基本的线条绘制形式也是如此，以下是示例：
const canvas=document.getElementById（'canvas'）；
canvas.width=canvas.height=50；
设ctx=canvas.getContext（'2d'）；
ctx.imageSmoothingEnabled=错误
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（））；
setAttribute（“下载”，“example.png”）

下载

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

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

输出为：


但它不适用于重叠的形状


const canvas=document.getElementById（'canvas'）；
设ctx=canvas.getContext（'2d'）；
ctx.imageSmoothingEnabled=假；
const drawingCanvas=新织物.Canvas（画布{
宽度：150，
身高：150，
背景色：“透明”，
选择：假，
enableRetinaScaling:false，
ImageSmoothInEnabled:错误，
});
让多边形=新结构。多边形([
{x:50，y:100}，
{x:70，y:10}，
{x:90，y:100}，
], {
笔划：“绿色”，
填充：“绿色”，
可选：false，
perPixelTargetFind：对，
鼠标悬停光标：“光标”
});
drawingCanvas.add（多边形）；
drawingCanvas.renderAll（）；
函数myNewImage（）{
const_canvas=document.createElement（'canvas'）；
常量像素=drawingCanvas.lowerCanvasEl；
_canvas.width=pixels.width；
_canvas.height=pixels.height；
const ctx=_canvas.getContext（'2d'）；
ctx.drawImage（像素，0,0）；
const data=ctx.getImageData（0,0，_canvas.width，_canvas.height）；
常量像素数组=data.data；
for（设i=3；i

下载
您是否在toDataURL中使用
编码选项
？如果您可以用一个简单的形状创建一个最小的代码段来显示您的issue@HelderSepu-对于默认PNG，编码器选项似乎不起任何作用。它只说它会影响其他格式。这是一个代码笔。如果同时下载大小png，当放大形状时，可以看到像素色差。我希望所有的像素都是相同的绿色，或者是透明的@VictorToddard-尝试了这个，但仍然可以看到形状边缘周围的像素颜色差异。试试代码笔，看看你是否能让所有的像素都有相同的颜色。