javascript - 如何在保留类型的同时设置类型化对象的属性？

Question

我有一个具体案例，但我也很好奇。

我有一个 Canvas ，我使用 createImageData 得到它的 ImgData，我将它的数据属性设置为其他东西，以便使用 PutImageData 并将这个修改后的 ImgData 传递给它。

我的 PureScript 版本失败了，尽管在控制台中用 Javascript 编写逻辑可以完美运行。错误是:

foreign.js:423 Uncaught TypeError: Failed to execute 'putImageData' on 'CanvasRenderingContext2D': 
parameter 1 is not of type 'ImageData'.

在纯脚本中:

getCleanBuffer :: forall e. Context2D -> Eff (canvas :: Canvas | e) ImageData
getCleanBuffer ctx = do
  imgData <- getImageData ctx 0.0 0.0 160.0 144.0
  return imgData { data = buffer }
 where buffer = asUint8ClampedArray $ A.replicate (160*144*4) 0

在控制台中编写这个 javascript 是可行的(arr 是 160*144*4 零)

var arr2 = new Uint8ClampedArray(arr);
var imgData = ctx.getImageData(0,0,160,144);
imgData.data = arr2;
ctx.putImageData(imgData,0,0);

我调试了 getCleanBuffer，这是我发现的

var getCleanBuffer = function (ctx) {
var buffer = Data_TypedArray.asUint8ClampedArray(Data_Array.replicate((160 * 144 | 0) * 4 | 0)(0));
return function __do() {
    var v = Graphics_Canvas.getImageData(ctx)(0.0)(0.0)(160.0)(144.0)();
    var $9 = {};
    for (var $10 in v) {
        if (v.hasOwnProperty($10)) {
            $9[$10] = v[$10];
        };
    };
    $9.data = buffer;
    return $9;

这个 $9(带有修改数据的 ImgData 副本)变量在检查时显示不是 ImgData 类型，就像 v(原始 ImgData)一样，但它只是一个“对象”。它缺少 v 拥有的宽度和高度，但即使我在调试期间修复它，我仍然会遇到同样的错误。

我认为问题在于新对象是无类型记录。宽度和高度未被复制的事实是另一个问题。

我可以编写一个 javascript 函数来手动设置数据属性。但总的来说，这种情况似乎很常见，我肯定遗漏了什么，不是吗？

谢谢!

Answer 1

在这种情况下，ImageData 的类型不正确，它是记录的类型同义词，但将 JavaScript 类类型值视为记录并不安全，这正是您在此处发现的原因.

我打开了a bug report正如菲尔建议的那样。

对于一般情况，这是镜头派上用场的地方。您可以定义像 _data::LensP ImageData Uint8ClampedArray 这样的镜头，然后可以执行 imgData # _data %~ buffer 来实现类似于更新语法的功能。