javascriptcsshtml5-canvascssom

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

base on this article: https://developer.mozilla.org/en-US/docs/Web/API/CSSImageValue

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

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

I want to use canvas check a background-picture is black, but in chrome, how can i do it.

btw, I didnot want to build a new image tag with the background image's url. please give me a more direct way.

Solution

  • last update, finally, i found out the truth, because there are more than one value with 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");