1

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.

Kaiido
  • 123,334
  • 13
  • 219
  • 285
defend orca
  • 617
  • 7
  • 17

2 Answers2

0

CSSImageValue is still experimental and subject to change. It's not widely supported, and only gained Chrome support in version 66. I'd suggest not using the feature if you're not shimming it for unsupported browsers, or building an experimental web project.

Read this part of the docs for compatibility info.

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

For accessing this property a different way, try the method in 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, "");
Joundill
  • 6,828
  • 12
  • 36
  • 50
  • chrome 66 means only 66, not from 66? get the url then build image, then use canvas check color, is this you mean? – defend orca May 24 '20 at 06:06
  • the code only get url, and the regex is wrong btw. because background-image with multi-layer. the most important is url string is not cssimagevalue, that can not be use by canvas directly. – defend orca May 24 '20 at 16:19
0

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");
defend orca
  • 617
  • 7
  • 17
  • @Kaiido you mean the first sample that background-image with two value is still cssimagevalue? in my chrome 83, it is cssstylevalue. – defend orca Jun 02 '20 at 14:46