drawImage Houdini CSS油漆API

Question

我正在Chrome 70上试用Houdini的CSS绘图API，但是我不能用这个例子：https://github.com/w3c/css-houdini-drafts/blob/master/css-paint-api/EXPLAINER.md#drawing-images

我正在通过这样的自定义属性传递一个图像：

--my-image: url("bridge.jpg");

我使用CSS属性和值API级别(通过试验性Web平台特性标志启用)注册我的图像属性：

CSS.registerProperty({
  name: '--my-image',
  syntax: '<image> | none',
  initialValue: 'none',
  inherits: false,
});

然后我试着在我的作品中画出来：

class MyWorklet {
  static get inputProperties() { 
    return ['--my-image']; 
  }

  paint(ctx, geom, properties) {
    const img = properties.get('--my-image');
    console.log(img);
    ctx.drawImage(img,10,10,150,180);    
  }
}
registerPaint('myworklet', MyWorklet);

为了显示worklet，我做了一个简单的500 * 500 div并添加了样式：

background-image: paint(myworklet);

控制台告诉我，img是一个CSSImageValue，因此它似乎在某种程度上工作，但是图像不会被绘制到div的背景上。

是否有人设法使这一工作，或一些功能，是需要的，这类东西还没有实现？

Answer 1

映像到目前为止还没有在Chrome上实现。应该可以在最新的(v72)中获得。但它需要内联代码，请参阅https://vitaliy-bobrov.github.io/blog/trying-paint-wroklet-in-safari-tp/。