Javascript 使用fabric.js缩放画布时，图像的像素级完美缩放

我的软件是一种带画笔的像素艺术绘画程序，fabric.js经过了大量修改，以便对fabric.js对象进行像素舍入平移（位置始终为整数），但是调整图像大小并使其像素与画布的比例为1:1仍然是一个问题

现在，fabric.js

zoomToPoint

功能用于在图像未缩放时，使用鼠标滚轮在画布上缩放，图像的像素与画布匹配，但当我向下（或向上）缩放任何对象时，像素不再适合画布，因此对象的像素实际上比画布像素小或大

缩放级别为8时问题的屏幕截图：

原始图像尺寸（没有问题，每个像素适合画布像素）

调整图像大小后，图像的像素不再适合画布像素

---

缩放图像时，图像的像素如何以1:1的比例匹配画布像素？

根据其性质，调整大小涉及对原始图像重新采样，并将现有像素插值/卷积到调整大小的空间中。由此产生的图像是为了在视觉上的吸引力，在其新的大小。但是，对于按

X

调整大小的图像，生成的像素肯定不再具有X:1关系

要放大，您需要一个“投影”，其中每个1x1像素扩展为2x2像素组（或3x3像素组，等等）

要缩小，您需要一个“投影”，其中每个2x2像素组压缩为一个1x1像素集

要缩小，源（缩放前）必须由像素组组成。这意味着您无法在不使用重采样的情况下将图像缩小到其原始大小以下。没有可用于缩小1X以下的投影。一种解决方法是让用户以2倍（或3倍或4倍）投影绘制，以便缩小

FabricJS不以本机方式进行投影…您必须使用临时画布元素进行投影。

下面是使用投影进行缩放的示例代码：

var zoom=2；
var img=新图像（）；
img.crossOrigin='anonymous'；
img.onload=启动；
//img.src=“sun.png”；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/sun.png";
函数start（）{
var iw=img.宽度；
var ih=img.高度；
img.宽度=iw；
img.高度=ih；
//将原始图像上的“当前缩放因子”设置为1x
img.zoom=1；
//测试：按4X调整大小
var zoom4x=调整大小（img，4，'canvas4x'）；
document.body.appendChild（zoom4x）；
//测试：将4X的大小调整回2X
var zoom2x=调整大小（zoom4x，0.50，'canvas2x'）；
document.body.appendChild（zoom2x）；
//测试：将2X调整回1X
var zoom1x=调整大小（zoom2x，0.50，'canvas1x'）；
document.body.appendChild（zoom1x）；
//测试：将1X的大小调整为一半
var zoomHx=调整大小（zoom1x，0.50，'canvas1x'）；
if（zoomHx）{document.body.appendChild（zoomHx）}；
//显示原始图像
文件.正文.附件（img）；
}
变量resize=函数（img、scale、id）{
var zoom=parseInt（img.zoom*scale）；
如果（缩放）