为什么 backgroundimage 不是 cssImageValue in chrome? 如何使用画布处理背景图像

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

但在铬中：

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 ....

我想使用画布检查背景图片是黑色的，但在铬中，我该怎么做。

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

Answer 1

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

有关兼容性信息，请阅读文档的这一部分。

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

要以不同的方式访问此属性，请尝试以下堆栈溢出答案中的方法：

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

Answer 2

上次更新，最后，我发现了真相，因为背景图像的值不止一个：

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