Html canvas 元素的 getImageData 与 Fabricjs 的内容不匹配 canvas

Question

我在 (80, 80) 添加了一个 fabric Rect，然后在该位置调用了 getImageData。但是，我从该位置获得的数据与我放置在那里的 Rect 不匹配。相反，我找到了 (60, 60) 附近的数据。

var canvas = new fabric.Canvas('fabric-canvas');
canvas.setHeight(800);
canvas.setWidth(800);

var rect = new fabric.Rect({
  left: 80,
  top: 80,
  fill: 'red',
  width: 20,
  height: 20
});
canvas.add(rect);

// This doesn't work
let data = canvas.getContext('2d').getImageData(80, 80, 20, 20);
canvas.getContext('2d').putImageData(data, 0, 0);

// This "works"
data = canvas.getContext('2d').getImageData(60, 60, 20, 20);
canvas.getContext('2d').putImageData(data, 100, 0);

这是一个 fiddle 演示：https://jsfiddle.net/2wxdb8ua/13/

这怎么可能？

Answer 1

问题肯定是由某些缩放引起的，要么是因为您的显示器是高分辨率显示器（a.k.a 视网膜），要么是在页面上应用了 browser/OS 缩放。

你可以自己计算world_coord * window.devicePixelRatio:

var canvas = new fabric.Canvas('fabric-canvas');
canvas.setHeight(800);
canvas.setWidth(800);

var rect = new fabric.Rect({
  left: 80,
  top: 80,
  fill: 'red',
  width: 20,
  height: 20
});

canvas.add(rect);

let ctx = canvas.getContext('2d').getImageData(...[80, 80, 20, 20].map(fixCoords));
canvas.getContext('2d').putImageData(ctx, ...[0, 0].map(fixCoords));

function fixCoords( coord ) {
  return coord * window.devicePixelRatio;
}

canvas#fabric-canvas {
  background: white;
  border: 2px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.1/fabric.min.js"></script>
<canvas id='fabric-canvas'></canvas>

或者使用 initOptionObject 的 enableRetinaScaling 参数禁用 fabric 的自动缩放:

var canvas = new fabric.Canvas('fabric-canvas', {
  enableRetinaScaling: false
});
canvas.setHeight(800);
canvas.setWidth(800);

var rect = new fabric.Rect({
  left: 80,
  top: 80,
  fill: 'red',
  width: 20,
  height: 20
});

canvas.add(rect);

let ctx = canvas.getContext('2d').getImageData(80, 80, 20, 20);
canvas.getContext('2d').putImageData(ctx, 0, 0);

canvas#fabric-canvas {
  background: white;
  border: 2px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.1/fabric.min.js"></script>
<canvas id='fabric-canvas'></canvas>

但请注意，使用后一种解决方案，您的 canvas 在高分辨率显示器上肯定会变得模糊。

Html canvas 元素的 getImageData 与 Fabricjs 的内容不匹配 canvas

Html canvas element's getImageData doesn't match content of Fabricjs canvas

javascript

fabricjs