drawImage Houdini CSS Paint API

Question

我正在Chrome 70上試用Houdini的CSS Paint API，但無法使用此示例： https : //github.com/w3c/css-houdini-drafts/blob/master/css-paint-api/EXPLAINER.md ＃繪制圖像

我通過這樣的自定義屬性傳遞圖像：

--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);

為了顯示工作表，我做了一個簡單的500 * 500 div並添加了樣式：

background-image: paint(myworklet);

控制台告訴我img是CSSImageValue ，因此它似乎可以某種方式工作，但是圖像不會被繪制到div的背景上。

有沒有人設法使它生效，或者尚未實現此類功能所需的某些功能？

Answer 1

到目前為止，Chrome尚未實現圖片。 應該在最新的Safari技術預覽版（v72）中可用。 但它需要內聯代碼，請參見https://vitaliy-bobrov.github.io/blog/trying-paint-wroklet-in-safari-tp/