স্বচ্ছতার সাথে আমার একটি রঙিন পিএনজি চিত্র রয়েছে। পুরো চিত্রটি সাদা করতে আমি সিএসএস ফিল্টার ব্যবহার করতে চাই তবে স্বচ্ছতাটি যেমন রেখেছি তেমনি রেখে দিন। সিএসএসে কি তা সম্ভব?
উত্তর:
তুমি ব্যবহার করতে পার
filter: brightness(0) invert(1);প্রথমে brightness(0)স্বচ্ছ অংশগুলি বাদ দিয়ে সমস্ত চিত্র কালো করে তোলে যা স্বচ্ছ থাকে।
তারপরে, invert(1)কালো অংশগুলি সাদা করে তোলে।
layout.css.filters.enabledসেট দিয়ে ফায়ারফক্স 34 এ কাজ করে true।
brightness(infinity)। তবে অনুশীলনে brightness(10000%)ধূসর রঙের জন্য যথেষ্ট পরিমাণেcontrast(0)
আমার জানা মতে, কোনও উপাদান রঙ করার জন্য দুঃখজনকভাবে কোনও সিএসএস ফিল্টার নেই (সম্ভবত কিছু এসভিজি ফিল্টার যাদু ব্যবহার করে, তবে আমি এর সাথে কিছুটা অপরিচিত) এবং এমনকি যদি এটি নাও হয় তবে ফিল্টারগুলি কেবলমাত্র সমর্থন করে ওয়েবকিট ব্রাউজারগুলি।
এই বলে, আপনি এখনও এটিকে ঘিরে কাজ করতে পারেন এবং canvasআপনার চিত্রটি সংশোধন করতে একটি ব্যবহার করতে পারেন । মূলত, আপনি একটি ক্যানভাসে একটি চিত্র উপাদান আঁকতে পারেন এবং তারপরে পিক্সেলগুলির মধ্য দিয়ে লুপ করতে পারেন, যার সাথে আপনার পছন্দসই রঙের সাথে সম্পর্কিত আরজিবিএ মানগুলি পরিবর্তন করতে পারেন।
তবে ক্যানভ্যাসগুলি কিছুটা বিধিনিষেধ নিয়ে আসে। সর্বাধিক গুরুত্বপূর্ণ, আপনাকে নিশ্চিত করতে হবে যে চিত্র src পৃষ্ঠাটির একই ডোমেন থেকে এসেছে। অন্যথায় ব্রাউজার আপনাকে ক্যানভাসের পিক্সেল ডেটা পড়তে বা সংশোধন করতে দেবে না।
এখানে একটি জেএসফিডেল জেএসফিডাল লোগোর রঙ পরিবর্তন করে।
//Base64 source, but any local source will work
var src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC0AAAAgCAYAAACGhPFEAAAABGdBTUEAALGPC/xhBQAABzhJREFUWAnNWAtwXFUZ/v9zs4GUJJu+k7tb5DFAGWO1aal1sJUiY3FQQaWidqgPLAMqYzd9CB073VodhCa7KziiFgWhzvAYQCiCD5yK4gOTDnZK2ymdZoruppu0afbu0pBs7p7f7yy96W662aw2QO/Mzj2P//Gd/5z/+89dprfzubnTN332Re+xiKawllxWucm+9O4eCi9xT8ctn45yKd3AXX1BPsu3XIiuY+K5kDmrUA7jORb5m2baLm7uscNrJr9eOF9Je8JAz9ySnFHlq9nEpG6CYx+RdJDQDtKymxT1iWZLFDUy0/kkfDUxzYVzV0hvHZLs946Gph+uBLCRmRDQdjTVwmw9DZCNMPi4KzqWbPX/sxwIu71vlrKq10HnZizwTSFZngj5f1NOx5s7bdB2LHWDEusBOD487LrX9qyd8qpnvJL3zGjqAh+pR4W4RVhu715Vv2U8PTWeQLn5YHvms4qsR4TpH/ImLfhfARvbPaGGrrjTtwjH5hFFfHcgkv5SOZ9mbvxIgwGaZl+8ULGcJ8zOsJa9R1r9B2d8v2eGb1KNieqBhLNz8ekyAoV3VAX985+FvSXEenF8lf9lA7DUUxa0HUl/RTG1EfOUQmUwwCtggDewiHmc1R+Ir/MfKJz/f9tTwn31Nf7qVxlHLR6qXwg7cHXqU/p4hPdUB6Lp55TiXwDYTsrpG12dbdY5t0WLrCSRSVjIItG0dqIAG2jHwlPTmvQdsL3Ajjg3nAq3zIgdS98ZiGV0MJZeWVJs2WNWIJK5hcLh0osuqVTxIAdi6X3w/0LFGoa+AtFMzo5kflix0gQLBiLOZmAYro84RcfSc3NKpFAcliM9eYDdjZ7QO/1mRc+CTapqFX+4lO9TQEPoUpz//anQ5FQphXdizB1QXXk/moOl/JUC7aLMDpQSHj02PdxbG9xybM60u47UjZ4bq290Zm451ky3HSi6kxTKJ9fXHQVvZJm1XTjutYsozw53T1L+2ufBGPMTe/c30M/mD3uChW+c+6tQttthuBnbqMBLKGbydI54/eFQ3b5CWa/dGMl8xFJ0D/rvg1Pjdxil+2XK5b6ZWD15lyfnvYOxTBYs9TrY5NbuUENRUo5EGtGyVUNtBwBfDjA/IDtTkiNRsdYD8O+NcVN2KUfXo3UnukvA6Z3I+mWeY++NpNoAwDvAv1Uiss7oiNBmYD+XraoO0NvnPVnvrbUsA4CcYusPgajzY2/cvN+KtOFl/6w/IWrvdTV/Ktla92KhkNcOxpwPCqm/IgLbEvteW1m4E2/d8iY9AZOXQ/7WxKq6nxq9YNT5OLF6DmAfTHT13EL3XjTk2csXk4bqX2OXWiQ73Jz49tS4N5d/oxoHLr14EzPfAf1IIlS/2oznIx1omLURhL5Qa1oxFuC8EeHb8U6I88bXCwGbuZ61jb2Jgz1XYUHb0b0vEHNWmHE9lNsjWrcmnMhNhYDNnCkmNJSFHFdzte82M1b04HgC6HrYbAPw1pFdNOc4GE334wz9qkihRAdK/0HBub/E1MkhJBiq6V8gq7Htm05OjN2C/z/jCP1xbAlCwcnsAsbdkGHF/trPIcoNrtbjFRNmoama6EgZ42SimRG5FjLHWakNwWjmirLyZpLpKH7TysghZ00OUHNTxFmK2yDNQSKlx7u0Q0GQeLtQdy4rY5zMzqVb/ccoJ/OQMEmoPWW3988to4NY8DxYf6WMDCW6ktuRvFqxmqewgguhdLCcwsic0DMA8lE7kvrYyFhBw446X2B/nRNo739/YnX9azKUXYCg9CtlvdAUyywuEB1p4gh9AzbPZc0mF8Z+sINgn0MIwiVgKcAG6rGlT86AMdqw2n8ppR63o+mveQXCFAxzX2BWD0P6pcT+g3uNlmEDV3JX4iOh1xICdWU2gGXOMXN5HfRhK4IoPxlfXQfmKf+Ajh1I+MEeHMcKzqvoxoZsHsoOXgP+fEkxbw1e2JhB0h2q9tc4OL/fAVdsdd3jnyhklmRo8qGBQXchIvMMKPW7Pt85/SM66CNmDw1mh75cHu6JWZFZxNLNSJTPIM5PuJquKEt3o6zmqyJZH4LTC7CIfTonO5Jr/B2jxIq6jW3OZVYVX4edDSD6e1BAXqwgl/I2miKp+ZayOkT0CjaJww21/2bhznio7uoiL2dQB8HdhoV++ri4AdUdtgfw789mRHspzulXzyCcI1BMVQXgL5LodnP7zFfE+N9/9yOUyedxTn/SFHWWj0ifAY1ANHUleOJRlPqdCUmbO85J1jjxUfkUkgVCsg1/uGw0n/fvFm67LT2NLTLfi98Cke8dpMGl3r9QxVRnPuPrWzaIUmsAtgas0okd6ETh7AYt5d7+BeCbhfKVcQ6CtwgJjjoiP3fdgVbcbY57/otBnxidfndvo6/67BtxUf4kztJsbMg0CJaU9QxN2FskhePQBWr7La6wvzRFarTtyoBgB4hm5M//aAMT2+/Vlfzp81/vywLMWSBN1QAAAABJRU5ErkJggg==";
var canvas = document.getElementById("theCanvas");
var ctx = canvas.getContext("2d");
var img = new Image;
//wait for the image to load
img.onload = function() {
//Draw the original image so that you can fetch the colour data
ctx.drawImage(img,0,0);
var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
/*
imgData.data is a one-dimensional array which contains
the respective RGBA values for every pixel
in the selected region of the context
(note i+=4 in the loop)
*/
for (var i = 0; i < imgData.data.length; i+=4) {
imgData.data[i] = 255; //Red, 0-255
imgData.data[i+1] = 255; //Green, 0-255
imgData.data[i+2] = 255; //Blue, 0-255
/*
imgData.data[i+3] contains the alpha value
which we are going to ignore and leave
alone with its original value
*/
}
ctx.clearRect(0, 0, canvas.width, canvas.height); //clear the original image
ctx.putImageData(imgData, 0, 0); //paint the new colorised image
}
//Load the image!
img.src = src;body {
background: green;
}<canvas id="theCanvas"></canvas>
filter। এটি বর্তমানে কেবল ওয়েবকিট ব্রাউজারগুলিতে সমর্থিত।