为什么 backgroundimage 不是 chrome 中的 cssImageValue？我如何使用 canvas 处理背景图像而不制作新图像？

Question

基于本文：https://developer.mozilla.org/en-US/docs/Web/API/CSSImageValue

const allComputedStyles = button.computedStyleMap(); 
// Return the CSSImageValue Example 
console.log( allComputedStyles.get('background-image') );

但在 chrome:

var img=imgelement.computedStyleMap().get('background-image')
canvas.getContext('2d').drawImage(img,0,0,img.width,img.height);
//output: Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D'
//: The provided value is not of type '(CSSImageValue ....

我想使用 canvas 检查背景图片是否为黑色，但在 chrome 中，我该怎么做。

顺便说一句，我不想用背景图片 url 构建新的图片标签。请给我一个更直接的方法。

Answer 1

CSSImageValue 仍处于实验阶段，可能会发生变化。它未得到广泛支持，仅在版本 66 中获得 Chrome 支持。如果您不针对不受支持的浏览器或构建实验性 Web 项目，我建议您不要使用该功能。

阅读文档的这一部分以获取兼容性信息。

https://developer.mozilla.org/en-US/docs/Web/API/CSSImageValue#Browser_compatibility

要以不同的方式访问此属性，请尝试 this Stack Overflow answer 中的方法：

var img = document.getElementById('your_div_id'),
style = img.currentStyle || window.getComputedStyle(img, false),
bi = style.backgroundImage.slice(4, -1).replace(/"/g, "");

Answer 2

最后更新，终于知道真相了，因为background-image的值不止一个：

//here is cssstylevalue
background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url("http://localhost:8080/icons/we-flow.png");

//here is cssimagevalue
background-image: url("http://localhost:8080/icons/we-flow.png");

为什么 backgroundimage 不是 chrome 中的 cssImageValue？我如何使用 canvas 处理背景图像而不制作新图像？

why backgroundimage is not cssImageValue in chrome? how can i use canvas deal with background-image but not make a new image?

javascript

css

cssom

html5-canvas