回答-BFW问答

css编写图片变灰的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        img {
            -webkit-filter: grayscale(1);
            /* Webkit */
            filter: gray;
            filter: url('url("data:image/svg+xml;utf8,<svg%20xmlns=' http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale");
            ')
            /* IE6-9 */
            filter: grayscale(1);
            /* W3C */
        }
    </style>
</head>
<body>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAYAAAAfrhY5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1MTI1NzZGRkI2MkQxMUVCOUQ4NUZDMTcwQTYxRERGMiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1MTI1NzcwMEI2MkQxMUVCOUQ4NUZDMTcwQTYxRERGMiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjUxMjU3NkZEQjYyRDExRUI5RDg1RkMxNzBBNjFEREYyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjUxMjU3NkZFQjYyRDExRUI5RDg1RkMxNzBBNjFEREYyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+36U1JwAAApJJREFUeNpi/P//PwMhINb9BMY0BmJrIFaEYhEg/gjE94H4ARCfBOLD6PpflcpgNZeFCIv5gFQSEMcCsREDYXALiBcB8QIgfopPISM+nwMtTgVSrUAsykA6+AHEjUDcgcvnWC0HWsoBpNYDsQcD5eAMEAcAHfCUoOVAi/mhcafOQD3wAYitgA64jizIhEXhWSpbDAICIA8BPSaM03Kg5G4gpcxAG8CLnhOYkCwGpWYXBtoCTaA99ShxDs1Or4CYnYE+QBYY/09gPo+no8UgUIAc7Nk0sGA+EBdDS0B0kAIOdtGuxzpA+jKVLV4IxAlQdgMQ12NR4w3yuReVLV6KZDEI2OFQ5wSyXIGKFq8G4hgk/l4gdsShVpoJWjtRA6wD4jAk/g6Q7/CoFwJZzoynSAxB8wkusBmIg5H4oHrBnVChA6pS3+GQ3ATMi2uR6vMlONQdAWI/JP5iUEVChIN/g3z+AoekK9BSLaREFIlFzT4gtkXiLyAypEDgHcjyRzgkJUHVIZIDVqA54CAQOyPxZ0MLK2IBuITbjkcBJ7Q+RnZAEbSCcEBSNwVWcJAAjsDK9hsEqtFv0PbbDSxyXUBcSqLFv4CYD1a8ziCgmAtaz2uiifeRYTE4bQAT808mpITylwgHIEdBDxAXklkm9KI0o4BBnwakZhKhEeTI20CsQabFk4G+zsNowwEdcAxIWdKwKn0KtFgGVxvOCU++pxSAQsyGUOsV5LLTQCxBRYtBqdsO6OuTxLTbQZ2ETUBsQQWLb0Hb7ddJ7bGUA6kmIGYj02JQGVANtPgPyd0lqAPkoH21RCCWI8LC19C+2jwgvoavo8hIQi8VlDjdQD0PqCPEoY3OX9CW72NoWtkB7acR7KUCBBgAapTGOx+g8VIAAAAASUVORK5CYII=" id="js-image" />

</script>
</body>
</html>

js编写图片变灰的代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

</head>
<body>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB8AAAAfCAYAAAAfrhY5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1MTI1NzZGRkI2MkQxMUVCOUQ4NUZDMTcwQTYxRERGMiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo1MTI1NzcwMEI2MkQxMUVCOUQ4NUZDMTcwQTYxRERGMiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjUxMjU3NkZEQjYyRDExRUI5RDg1RkMxNzBBNjFEREYyIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjUxMjU3NkZFQjYyRDExRUI5RDg1RkMxNzBBNjFEREYyIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+36U1JwAAApJJREFUeNpi/P//PwMhINb9BMY0BmJrIFaEYhEg/gjE94H4ARCfBOLD6PpflcpgNZeFCIv5gFQSEMcCsREDYXALiBcB8QIgfopPISM+nwMtTgVSrUAsykA6+AHEjUDcgcvnWC0HWsoBpNYDsQcD5eAMEAcAHfCUoOVAi/mhcafOQD3wAYitgA64jizIhEXhWSpbDAICIA8BPSaM03Kg5G4gpcxAG8CLnhOYkCwGpWYXBtoCTaA99ShxDs1Or4CYnYE+QBYY/09gPo+no8UgUIAc7Nk0sGA+EBdDS0B0kAIOdtGuxzpA+jKVLV4IxAlQdgMQ12NR4w3yuReVLV6KZDEI2OFQ5wSyXIGKFq8G4hgk/l4gdsShVpoJWjtRA6wD4jAk/g6Q7/CoFwJZzoynSAxB8wkusBmIg5H4oHrBnVChA6pS3+GQ3ATMi2uR6vMlONQdAWI/JP5iUEVChIN/g3z+AoekK9BSLaREFIlFzT4gtkXiLyAypEDgHcjyRzgkJUHVIZIDVqA54CAQOyPxZ0MLK2IBuITbjkcBJ7Q+RnZAEbSCcEBSNwVWcJAAjsDK9hsEqtFv0PbbDSxyXUBcSqLFv4CYD1a8ziCgmAtaz2uiifeRYTE4bQAT808mpITylwgHIEdBDxAXklkm9KI0o4BBnwakZhKhEeTI20CsQabFk4G+zsNowwEdcAxIWdKwKn0KtFgGVxvOCU++pxSAQsyGUOsV5LLTQCxBRYtBqdsO6OuTxLTbQZ2ETUBsQQWLb0Hb7ddJ7bGUA6kmIGYj02JQGVANtPgPyd0lqAPkoH21RCCWI8LC19C+2jwgvoavo8hIQi8VlDjdQD0PqCPEoY3OX9CW72NoWtkB7acR7KUCBBgAapTGOx+g8VIAAAAASUVORK5CYII=" id="js-image" />
    <script type="text/javascript">

        var imgObj = document.getElementById('js-image');

        imgObj.src = gray(imgObj);



        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();
        }

    </script>
</body>
</html>

回答

开发了一个网站ai聊天助手

一个月开发一套类似coze的智能体平台

部署一套内网离线ai助理

私有ai助理开发

类似如家的租房app开发

h5手机端考试网站开发

开发一个短剧解锁剧集的小程序

我要开发一个酒类拍卖交易平台

开发艺术品拍卖收藏买画卖画h5网站

帮我做个数字货币交易所网站

DLNA与UPnP的区别和不同？

苏超自建抢票app，通过先预约再抽签化解高并发抢票？

python如何让给电脑在局域网中伪装成电视接收手机的投屏图片视频播放？

如何结合python+js如何自己的视频编码与加密播放直播？

python如何在电脑上通过局域网将本地视频或m3u8视频投屏电视播放？

腾讯视频爱奇艺优酷vip电影电视剧视频如何通过python绕过vip收费直接观看？

有没有可免费观看全球电视台直播m3u8地址url的合集？

有没有实现观影自由的免vip影视苹果 CMS V10 API的可用url？

python如何实时检测电脑usb插入检测报警？

如何判断真人操作的鼠标移动直线轨迹与机器操作的轨迹？