时间戳

首页 > 解决方案 > Html 画布元素的 getImageData 与 Fabricjs 画布的内容不匹配

javascript - Html 画布元素的 getImageData 与 Fabricjs 画布的内容不匹配

问题描述

我在 (80, 80) 处添加了一个结构 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);

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

这怎么可能？

标签： javascriptfabricjs

解决方案

问题肯定是由一些缩放引起的，要么是由于您的显示器是高分辨率显示器（又名视网膜），要么是在页面上应用了浏览器/操作系统缩放。

您可以自己进行计算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>

或者通过使用initOptionObjectenableRetinaScaling的参数禁用结构的自动缩放：

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>

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

推荐阅读