trying to find a JS script/function for gray scaling an entity_picture I found How to Turn Web Images to Grayscale (3 Ways) - Hongkiat and the 2d method there seems to come close to what I need.
Ive tried to configure it as follows, so I can use it in a picture customization (using custom-ui) but I cant get it to work.
device_tracker.unifi_mijn_mobiel:
entity_picture: >
[[[ function gray(imgObj) {
var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
var imgW = imgObj.width;
var imgH = imgObj.height;
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(imgObj, 0, 0);
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}
return gray('/local/family/mijn_mobiel.jpg'); ]]]
When I test this in a button-card an error is displayed:
button-card.js?v=3.4.2:425 ButtonCardJSTemplateError: TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'
maybe this is not possible at all, but Id love to get feedback from a fellow community member with JS expertise.
Btw, I know I can simply use a grayscale filter in button cards, but this is not for that use case.
Hope you can have a look, Thanks!
You need to supply it an actual image element. That can either be an image tag that is already part of the DOM (the webpage basically) or, if you don’t want/have one, it can also be an offscreen image buffer that you must create beforehand.
