javascript - 为什么 backgroundimage 在 chrome 中不是 cssImageValue？我如何使用画布处理背景图像但不制作新图像？

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

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

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

标签： javascriptcsshtml5-canvascssom

Answer 1

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

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

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

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

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