Javascript 画布图像数据呈现不一致

我正在研究一个处理canvas putImageData的非常奇怪的bug。以下是代码片段：

// Results contains an indexMap of size 90000 and rgbdata of size 360000, data from a 300*300px source canvas
var results = state.results;

// output_canvas is the target canvas element of 300*300px
var output_canvas = document.getElementById('output_canvas');
var context = output_canvas.getContext('2d');
var imageData = context.createImageData(300, 300);
var data = imageData.data;
for (var i = 0; i < results.indexMap.length; ++i) {
    if (results.segments[results.indexMap[i]].foreground) {
        data[4 * i + 0] = results.rgbData[4 * i + 0];
        data[4 * i + 1] = results.rgbData[4 * i + 1];
        data[4 * i + 2] = results.rgbData[4 * i + 2];
        data[4 * i + 3] = 255;
    } else {
        data[4 * i + 3] = 0;
    }
}
context.putImageData(imageData, 0, 0);

//结果包含大小为90000的indexMap和大小为360000的rgbdata，数据来自300*300px的源画布
var结果=state.results；
//output_canvas是300*300px的目标canvas元素
var output_canvas=document.getElementById（'output_canvas'）；
var context=output_canvas.getContext（'2d'）；
var imageData=context.createImageData（300300）；
var数据=imageData.data；
对于（变量i=0；i

我可以在Mac chrome上的“output_canvas”上获得正确的图像渲染。但它无法在Safari和Firefox上呈现。最终图像被截取，在两个维度上看起来都是原来的两倍大。我怀疑这是putImageData实现的浏览器问题，但我找不到任何官方来源的确认。有人有类似的问题吗？感谢您的帮助

更新日期：2017年11月16日：。这是一个工作的概念证明小提琴。它在Safari和Chrome上给了我不同的结果

---

2017年11月17日更新：修复小提琴：。关键在于固定window.devicePixelRatio。织物放大了场景后面的画布，因此真实图像在两个维度上都要大两倍。我最终提升了dest画布的大小以匹配结果数据。

你能分享一个实例吗？@kaido请在更新中查看我的小提琴。你总是从Fabric.js画布获取此imageData吗？你在视网膜显示器上？（我不是这样不能重新编程，在我的机器上，chrome FF和Safari的工作原理是一样的）。如果是这样，请禁用该选项，或者考虑到您的

元素的大小已被CSS加倍并重新缩小，以便您可以在

destCanvas

@kaido上执行相同的操作，这正是问题所在。谢谢你，好先生。