Theাকা পটভূমি অঞ্চলটির উজ্জ্বলতার ভিত্তিতে পাঠ্যের রঙ পরিবর্তন করবেন?

Question

আমি নিম্নলিখিতগুলি সম্পর্কে ইতিমধ্যে কিছুক্ষণ চিন্তা করেছি, সুতরাং এখন আমি আপনার মতামত, সম্ভাব্য সমাধানগুলি এবং আরও জানতে চাই।

আমি এমন একটি প্লাগইন বা কৌশল খুঁজছি যা কোনও পাঠকের রঙ পরিবর্তন করে বা পূর্বনির্ধারিত চিত্র / আইকনগুলির মধ্যে পরিবর্তন করে এটির পিতামাতার পটভূমির চিত্র বা রঙের theাকা পিক্সেলের গড় উজ্জ্বলতার উপর নির্ভর করে।

যদি এর পটভূমির আচ্ছাদিত অঞ্চলটি অন্ধকার হয় তবে পাঠ্যটিকে সাদা করুন বা আইকনগুলিতে স্যুইচ করুন।

অধিকন্তু, স্ক্রিপ্টটি যদি পিতামাতার কোনও সংজ্ঞায়িত ব্যাকগ্রাউন্ড-বর্ণ বা-চিত্র না থাকে এবং তারপরে সর্বাধিক নিকটস্থ (প্যারেন্ট উপাদান থেকে এর পিতামণ্ডলের উপাদান পর্যন্ত অনুসন্ধান করা) চালিয়ে যায় তবে এটি দুর্দান্ত।

আপনি কি মনে করেন, এই ধারণা সম্পর্কে জানেন? ইতিমধ্যে সেখানে কিছু অনুরূপ আছে? স্ক্রিপ্ট-উদাহরণ?

চিয়ার্স, জে।

Comments

উত্তর না দিয়ে কেবল একটি চিন্তাভাবনা। আপনার রঙগুলি এইচএসএল ব্যবহার করে সেট করার একটি উপায় থাকতে পারে তারপরে হালকা মানের দিকে তাকান। যদি সেই মানটি একটি নির্দিষ্ট মানের উপরে হয় তবে একটি সিএসএস বিধি প্রয়োগ করুন।

— স্কট ব্রাউন

আপনি আলফা চ্যানেলটি শূন্যতে সেট করা থাকলে ডিওএম ট্রি কাজ করে আপনি কোনও উপাদানটির ব্যাকগ্রাউন্ড রঙটি आर, জি, বি (এবং alচ্ছিক আলফা) মানগুলিতে বিভক্ত করতে পারবেন। যাইহোক, একটি ব্যাকগ্রাউন্ড চিত্রের রঙ নির্ধারণের চেষ্টা করা সম্পূর্ণ অন্য বিষয়।

— jackwanders

ইতিমধ্যে এখানে জবাব দিয়েছেন stackoverflow.com/questions/5650924/javascript-color-contraster

— পাস্কাল

@ প্যাসাল বেশ একই রকম, এবং ভাল ইনপুট .. তবে এটি আমার প্রশ্নের সঠিক উত্তর নয়।

— জেমস কাজিটা

Answer 1

এর জন্য আকর্ষণীয় সংস্থানগুলি:

• ডাব্লু 3 সি - নিশ্চিত করুন যে অগ্রভূমি এবং পটভূমির রঙ সংমিশ্রণগুলি যথেষ্ট বৈপরীত্য সরবরাহ করে
• একটি রঙের অনুভূত উজ্জ্বলতা গণনা করা হচ্ছে

এখানে ডাব্লু 3 সি অ্যালগরিদম রয়েছে ( জেএসফিডাল ডেমো সহ ):

const rgb = [255, 0, 0];

// Randomly change to showcase updates
setInterval(setContrast, 1000);

function setContrast() {
  // Randomly update colours
  rgb[0] = Math.round(Math.random() * 255);
  rgb[1] = Math.round(Math.random() * 255);
  rgb[2] = Math.round(Math.random() * 255);

  // http://www.w3.org/TR/AERT#color-contrast
  const brightness = Math.round(((parseInt(rgb[0]) * 299) +
                      (parseInt(rgb[1]) * 587) +
                      (parseInt(rgb[2]) * 114)) / 1000);
  const textColour = (brightness > 125) ? 'black' : 'white';
  const backgroundColour = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
  $('#bg').css('color', textColour); 
  $('#bg').css('background-color', backgroundColour);
}

#bg {
  width: 200px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="bg">Text Example</div>

Comments

ফেলিক্স আপনি ঠিক বলেছেন! আমি এখনই চলে এসেছি, তবে নিশ্চিত, ফিরে আসার পরে আমি উত্তরটি আপডেট করব

— অ্যালেক্স বল

নিম্নলিখিতটি সংক্ষিপ্ত আকারে তৈরি করা যায়, আপনি এটি কোনও বস্তু পাস করার মাধ্যমে :::: const setContrast = rgb => (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000> 125? 'কালো': 'সাদা'

— লুক রবার্টসন

আপনার কি কেবল সিএসএস পরিবর্তনের জন্য jquery দরকার?

— নীলজাইকে

@ ব্লুজেয়েকে না, অন্য উপায় আছে ;-)

— অ্যালেক্স বল

Answer 2

রঙ বৈপরীত্য গণনা সম্পর্কে 24 উপায়ে এই নিবন্ধটি আপনার আগ্রহী হতে পারে। ফাংশনগুলির প্রথম সেটটি অগ্রাহ্য করুন কারণ সেগুলি ভুল, তবে ওয়াইআইকিউ সূত্র আপনাকে হালকা বা গা dark় অগ্রভাগের রঙ ব্যবহার করবে কিনা তা নির্ধারণ করতে সহায়তা করবে।

একবার আপনি উপাদানটির (বা পূর্বপুরুষের) পটভূমির রঙটি পেয়ে গেলে, আপনি উপযুক্ত অগ্রভাগের রঙ নির্ধারণ করতে নিবন্ধ থেকে এই ফাংশনটি ব্যবহার করতে পারেন:

function getContrastYIQ(hexcolor){
    hexcolor = hexcolor.replace("#", "");
    var r = parseInt(hexcolor.substr(0,2),16);
    var g = parseInt(hexcolor.substr(2,2),16);
    var b = parseInt(hexcolor.substr(4,2),16);
    var yiq = ((r*299)+(g*587)+(b*114))/1000;
    return (yiq >= 128) ? 'black' : 'white';
}

Comments

ধন্যবাদ, এটি সত্যিই সহায়ক .. এটি সেট ব্যাকগ্রাউন্ড-রঙের উপর নির্ভর করে .. তবে আপনি কী জানেন যে প্রতিটি পিক্সেল (লুপের মতো) দিয়ে চালিয়ে কোনও চিত্রের গড় রঙ কীভাবে পাবেন?

— জেমস কাজজিটা

এস In এ আপনি এটি সহ করতে পারেন:const getContrastYIQ = hc => { const [r, g, b] = [0, 2, 4].map( p => parseInt( hc.substr( p, 2 ), 16 ) ); return ((r * 299) + (g * 587) + (b * 114)) / 1000 >= 128; }

— সেন্ট্রিল

আমি এই ফাংশনটি নিয়েছি এবং এটি কিছুটা প্রসারিত করেছি যাতে আপনি সবসময় কালো এবং সাদা না হয়ে দুটি কাস্টম রঙ ফিরতে পারেন। নোট করুন যে রঙগুলি যদি দুটি একসাথে হয় তবে আপনি এখনও বিপরীতে সমস্যাগুলি পেতে পারেন তবে পরম রঙগুলি ফেরত দেওয়ার জন্য এটি একটি ভাল বিকল্প jsfiddle.net/1905occv/1

— হান্না

এটি কুল, আমি কেবল ইয়িককে> = 160 এ সামঞ্জস্য করব, আমার জন্য আরও ভাল কাজ করেছে।

— আর্টুরো

Answer 3

আকর্ষণীয় প্রশ্ন। আমার তাত্ক্ষণিক চিন্তাটি ছিল পাঠ্য হিসাবে পটভূমির রঙ উল্টানো। এর মধ্যে কেবল ব্যাকগ্রাউন্ডটি পার্স করা এবং এর আরজিবি মান উল্টে দেওয়া জড়িত।

এরকম কিছু: http://jsfiddle.net/2VTnZ/2/

var rgb = $('#test').css('backgroundColor');
var colors = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
var brightness = 1;

var r = colors[1];
var g = colors[2];
var b = colors[3];

var ir = Math.floor((255-r)*brightness);
var ig = Math.floor((255-g)*brightness);
var ib = Math.floor((255-b)*brightness);

$('#test').css('color', 'rgb('+ir+','+ig+','+ib+')');

Comments

উল্টানো আর, জি, বি মানের গড় এবং একে অপরের সমান করে সেট করে আপনি সম্ভবত আপনার 'উল্টানো' রঙ বিচ্ছিন্ন করতে চান। যাইহোক, এই সমাধানটি স্ট্রিং থেকে তার বেস রঙটি পাচ্ছে, এবং উপাদানটির সিএসএস সম্পত্তি থেকে নয়। নির্ভরযোগ্য হওয়ার জন্য, সমাধানটিতে গতিশীল পটভূমির রঙগুলি অর্জন করতে হবে, যা সাধারণত rgb () বা rgba () মান দেয়, তবে ব্রাউজার অনুযায়ী পৃথক হতে পারে।

— jackwanders

হ্যাঁ. পার্সিংয়ের স্বাচ্ছন্দ্যের জন্য, আমি কেবল একটি হেক্স মান ব্যবহার করেছি। আমি সিএসএস থেকে উপাদানটির রঙ ধরতে অন্তর্ভুক্ত করতে ফিডলটি আপডেট করেছি। আমি ফিডল আপডেট করেছি এবং এক ধরণের উজ্জ্বলতা নিয়ন্ত্রণকে অন্তর্ভুক্ত করেছি (রঙের গণিত সম্পর্কে আমি কিছুই জানি না তাই এটি সত্যই উজ্জ্বলতা নয়)।

— jeremyharris

এ কেমন? stackoverflow.com/questions/2541481/...

— jeremyharris

যদি ব্যাকগ্রাউন্ড কালার হয় #808080!?

— নাথান ম্যাকআইনেস

@ নাথানম্যাকস্নে এটি এখনও এটিকে উল্টে দেবে, ঠিক তাই ঘটে যে বর্ণালীটির ঠিক মাঝখানে কিছু উল্টানো নিজেই ফলস্বরূপ। এই কোডটি কেবল রঙটি উল্টায়, যা এর সীমাবদ্ধতার সাথে আসে।

— jeremyharris

Answer 4

mix-blend-mode কৌশলটি করে:

header {
  overflow: hidden;
  height: 100vh;
  background: url(https://www.w3schools.com/html/pic_mountain.jpg) 50%/cover;
}

h2 {
  color: white;
  font: 900 35vmin/50vh arial;
  text-align: center;
  mix-blend-mode: difference;
  filter: drop-shadow(0.05em 0.05em orange);
}

<header>
  <h2 contentEditable role='textbox' aria-multiline='true' >Edit me here</h2>
</header>

সংযোজন (মার্চ 2018): নিম্নলিখিত, সমস্ত ধরণের মোড / বাস্তবায়ন সম্পর্কিত একটি সুন্দর টিউটোরিয়াল: https://css-tricks.com/css-techniques-and-effects-for-knockout-text/

Answer 5

আমি ব্যাকগ্রাউন্ডচেক খুঁজে পেয়েছি স্ক্রিপ্টটি খুব দরকারী বলে ।

এটি ব্যাকগ্রাউন্ডের ওভারাল উজ্জ্বলতা সনাক্ত করে (এটি কোনও পটভূমির চিত্র বা রঙ হোক) এবং নির্ধারিত পাঠ্য-উপাদানগুলিতে কোনও শ্রেণি প্রয়োগ করে ( background--lightবাbackground--dark এবং পটভূমির উজ্জ্বলতার উপর নির্ভর করে ) এর করে।

এটি স্থির এবং চলমান উপাদানগুলিতে প্রয়োগ করা যেতে পারে।

( উত্স )

Comments

অবদানের জন্য ধন্যবাদ!

— জেমস ক্যাজেটা

এটি কি ব্যাকগ্রাউন্ড-রঙের জন্য কাজ করে? আমি স্ক্রিপ্টটি দ্রুত পড়েছি এবং উজ্জ্বলতা পরীক্ষা করতে এটি পটভূমির রঙ ব্যবহার করে দেখতে পাচ্ছি না। কেবল ছবি

— জার্জেন স্কার ফিশার

হ্যালো জারজেন, আমি মনে করি কলরব্রেইনেস স্ক্রিপ্টটি আপনার উদ্দেশ্যটি পরিবেশন করতে পারে: github.com/jamiebrittain/colourBrightness.js

— cptstarling

Answer 6

আপনি যদি ES6 ব্যবহার করছেন, হেক্সকে আরজিবিতে রূপান্তর করুন তবে এটি ব্যবহার করতে পারেন:

const hexToRgb = hex => {
    // turn hex val to RGB
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
    return result
        ? {
              r: parseInt(result[1], 16),
              g: parseInt(result[2], 16),
              b: parseInt(result[3], 16)
          }
        : null
}

// calc to work out if it will match on black or white better
const setContrast = rgb =>
    (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000 > 125 ? 'black' : 'white'

const getCorrectColor = setContrast(hexToRgb(#ffffff))

Answer 7

এখানে আমার প্রচেষ্টা:

(function ($) {
    $.fn.contrastingText = function () {
        var el = this,
            transparent;
        transparent = function (c) {
            var m = c.match(/[0-9]+/g);
            if (m !== null) {
                return !!m[3];
            }
            else return false;
        };
        while (transparent(el.css('background-color'))) {
            el = el.parent();
        }
        var parts = el.css('background-color').match(/[0-9]+/g);
        this.lightBackground = !!Math.round(
            (
                parseInt(parts[0], 10) + // red
                parseInt(parts[1], 10) + // green
                parseInt(parts[2], 10) // blue
            ) / 765 // 255 * 3, so that we avg, then normalize to 1
        );
        if (this.lightBackground) {
            this.css('color', 'black');
        } else {
            this.css('color', 'white');
        }
        return this;
    };
}(jQuery));

তারপরে এটি ব্যবহার করতে:

var t = $('#my-el');
t.contrastingText();

এটি সরাসরি তাত্ক্ষণিকভাবে পাঠ্যকে কালো বা সাদাকে উপযুক্ত হিসাবে তৈরি করবে। আইকনগুলি করতে:

if (t.lightBackground) {
    iconSuffix = 'black';
} else {
    iconSuffix = 'white';
}

তারপরে প্রতিটি আইকন দেখতে দেখতে পারে 'save' + iconSuffix + '.jpg'।

মনে রাখবেন যে যেখানে কোনও ধারক তার পিতামাতাকে উপচে ফেলে সেখানে কাজ করবে না (উদাহরণস্বরূপ, যদি সিএসএসের উচ্চতা 0 থাকে এবং ওভারফ্লো লুকানো না থাকে)। কাজটি করা আরও অনেক জটিল হবে।

Answer 8

উত্তরগুলি [@ অ্যালেক্স-বল, @ জেরেমিহারিস] একত্রিত করে আমি এটি আমার পক্ষে সেরা উপায় হিসাবে খুঁজে পেয়েছি:

        $('.elzahaby-bg').each(function () {
            var rgb = $(this).css('backgroundColor');
            var colors = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

            var r = colors[1];
            var g = colors[2];
            var b = colors[3];

            var o = Math.round(((parseInt(r) * 299) + (parseInt(g) * 587) + (parseInt(b) * 114)) /1000);

            if(o > 125) {
                $(this).css('color', 'black');
            }else{
                $(this).css('color', 'white');
            }
        });

*{
    padding: 9px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class='elzahaby-bg' style='background-color:#000'>color is white</div>

<div class='elzahaby-bg' style='background-color:#fff'>color is black</div>
<div class='elzahaby-bg' style='background-color:yellow'>color is black</div>
<div class='elzahaby-bg' style='background-color:red'>color is white</div>