Image Color Picker online- wersja dla myśliwych

Spis treści

Prosty próbnik kolorów
Image Color Picker online
Zasada działania:
Jak wstawić próbnik kolorów na własną stronę?

Prosty próbnik kolorów

Image Color Picker to narzędzie, które pozwala użytkownikom na wybór i identyfikację kolorów z dowolnego obrazu. Jest często używane w projektowaniu graficznym, edycji zdjęć, tworzeniu stron internetowych oraz w innych dziedzinach, gdzie precyzyjne dobieranie kolorów jest istotne.
Ponżej znajdziecie wszystkie pliki źródłowe aby wstawić próbnik na własną stronę.

Image Color Picker online

Otwórz zdjęcie

Kod koloru skopiowany!

Zasada działania:

1. Wczytanie obrazu: Użytkownik ładuje obraz do narzędzia. Może to być plik graficzny (np. JPEG, PNG) lub obraz bezpośrednio z internetu.
2. Wybór piksela: Użytkownik wskazuje konkretny piksel na obrazie, zazwyczaj za pomocą kursora myszy. Narzędzie analizuje wartość koloru tego piksela.
3. Analiza koloru: Każdy piksel w obrazie cyfrowym składa się z kombinacji trzech podstawowych kolorów: czerwonego (R), zielonego (G) i niebieskiego (B). Narzędzie odczytuje wartości RGB dla wybranego piksela.
4. Konwersja koloru: Oprócz wartości RGB, narzędzie może również konwertować kolor na inne formaty, takie jak:
  - HEX: Sześciocyfrowy kod używany w projektowaniu stron internetowych (np. #FFFFFF dla białego).
5. Wyświetlenie wyniku: Narzędzie wyświetla wybrany kolor w formie wartości RGB, HEX, a także pokazuje próbkę koloru, aby użytkownik mógł go łatwo zidentyfikować.
6. Powiększenia fragmentu obrazu, aby ułatwić precyzyjny wybór piksela.

Jak wstawić próbnik kolorów na własną stronę?

Można to zrobić ręcznie lub pobrać gotowe pliki i edytować je jak dusza zapragnie.

Samodzielnie:

Tworzymy nowy folder a w nim odpowiednie pliki:

1. index.html
2. style.css
3. script.js

I wklejamy poniższe kody źródłowe.

index.html

<!DOCTYPE html>
<html lang="pl">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Color Picker</title>
<!-- Font Awesome Icons -->
<link
      rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<!-- Google Fonts -->
<link
      href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" />
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrapper">
  <div class="image-container"> <img id="image" src="https://skrip.pl/html/inne/Image_Editor/223d1a8c-124f-475d-8a84-30832e4b4f3b.jpg" /> </div>
  <div class="btns-container">
    <input type="file" id="file" accesskey="image/*" />
    <label for="file">Otwórz zdjęcie</label>
    <button id="pick-color">Wybierz kolor</button>
  </div>
  <div id="error" class="hide"></div>
  <div id="result" class="hide">
    <div>
      <input type="text" id="hex-val-ref" />
      <button onclick="copy('hex-val-ref')"> <i class="fa-regular fa-copy"></i> </button>
    </div>
    <div>
      <input type="text" id="rgb-val-ref" />
      <button onclick="copy('rgb-val-ref')"> <i class="fa-regular fa-copy"></i> </button>
    </div>
    <div id="picked-color-ref"></div>
  </div>
  <div id="custom-alert">Kod koloru skopiowany!</div>
</div>
<!-- Script --> 
<script src="script.js"></script>
</body>
</html>

style.css

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: transparent;
}
.wrapper {
  background-color: #ffffff;
  width: 90%;
  max-width: 31.25em;
  position: absolute;
  transform: translateX(-50%);
  left: 50%;
  top: 0.5em;
  padding: 1.5em;
  border-radius: 0.5em;
  border: solid 1px rgba(204, 204, 204, 0.5);  
}
img {
  display: block;
  width: 90%;
  margin: auto;
}
.btns-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  margin: 1em 0 1.5em 0;
}
input, label, button {
  border: none;
  outline: none;
}
input[type="file"] {
  display: none;
}
label, button {
  display: block;
  font-size: 1.1em;
  background-color: #2196f3;
  color: #ffffff;
  text-align: center;
  padding: 0.8em 0;
  border-radius: 0.3em;
  cursor: pointer;
}
#result {
  /* display: grid; */
  grid-template-columns: 1fr 1fr;
  grid-gap: 1em;
}
#result div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#result input {
  background-color: transparent;
  font-size: 1em;
  padding: 0.5em;
  width: 100%;
  color: #313b4c;
  border-bottom: 0.1em solid #021637;
}
#result button {
  position: absolute;
  right: 0.6em;
  background-color: transparent;
  color: #7c8696;
}
#picked-color-ref {
  grid-column: 2;
  grid-row: 1 / 3;
  border: 0.6em solid #d9e8ff;
  border-radius: 0.5em;
}
#custom-alert {
  transform: scale(0);
  transition: 0.5s;
  transform-origin: center;
  background-color: #d9e8ff;
  color: #025bee;
  text-align: center;
  padding: 0.5em;
  margin-top: 1.5em;
}
.hide {
  display: none;
}
#error {
  color: #ff725a;
  text-align: center;
}

script.js

// JavaScript Document
// www.skrip.pl
//Create Initial references
let pickColor = document.getElementById("pick-color");
let error = document.getElementById("error");
let fileInput = document.getElementById("file");
let image = document.getElementById("image");
let hexValRef = document.getElementById("hex-val-ref");
let rgbValRef = document.getElementById("rgb-val-ref");
let customAlert = document.getElementById("custom-alert");
let pickedColorRef = document.getElementById("picked-color-ref");
let eyeDropper;

//Function On Window Load
window.onload = () => {
  //Check if the browser supports eyedropper
  if ("EyeDropper" in window) {
    pickColor.classList.remove("hide");
    eyeDropper = new EyeDropper();
  } else {
    error.classList.remove("hide");
    error.innerText = "Your browser doesn't support Eyedropper API";
    pickColor.classList.add("hide");
    return false;
  }
};

//Eyedropper logic
const colorSelector = async () => {
  const color = await eyeDropper
    .open()
    .then((colorValue) => {
      error.classList.add("hide");
      //Get the hex color code
      let hexValue = colorValue.sRGBHex;
      //Convert Hex Value To RGB
      let rgbArr = [];
      for (let i = 1; i < hexValue.length; i += 2) {
        rgbArr.push(parseInt(hexValue[i] + hexValue[i + 1], 16));
        console.log(rgbArr);
      }
      let rgbValue = "rgb(" + rgbArr + ")";
      console.log(hexValue, rgbValue);
      result.style.display = "grid";
      hexValRef.value = hexValue;
      rgbValRef.value = rgbValue;
      pickedColorRef.style.backgroundColor = hexValue;
    })
    .catch((err) => {
      error.classList.remove("hide");
      //If user presses escape to close the eyedropper
      if (err.toString().includes("AbortError")) {
        error.innerText = "";
      } else {
        error.innerText = err;
      }
    });
};

//Button click
pickColor.addEventListener("click", colorSelector);

//Allow user to choose image of their own choice
fileInput.onchange = () => {
  result.style.display = "none";
  //The fileReader object helps to read contents of file stored on computer
  let reader = new FileReader();
  //readAsDataURL reads the content of input file
  reader.readAsDataURL(fileInput.files[0]);
  reader.onload = () => {
    //onload is triggered after file reading operation is successfully completed
    //set src attribute of image to result/input file
    image.setAttribute("src", reader.result);
  };
};

//Function to copy the color code
let copy = (textId) => {
  //Selects the text in the <input> element
  document.getElementById(textId).select();
  //Copies the selected text to clipboard
  document.execCommand("copy");
  //Display Alert
  customAlert.style.transform = "scale(1)";
  setTimeout(() => {
    customAlert.style.transform = "scale(0)";
  }, 2000);
};

Top Stories

Edytor Zdjęć Online – Darmowe Narzędzie do Edycji Obrazów

Macierz w Matematyce – Kalkulator Online

Kalkulator arytmetyczny międzysystemowy, konwerter systemów liczbowych oraz tekstu ASCII na Binarny

Image Color Picker online- wersja dla myśliwych

Image Color Picker to narzędzie, które pozwala użytkownikom na wybór i identyfikację kolorów z dowolnego obrazu

Prosty próbnik kolorów

Image Color Picker online

Zasada działania:

Jak wstawić próbnik kolorów na własną stronę?

Samodzielnie:

index.html

style.css

script.js

Chmurka tagów

Zaprzyjaźniona strona

Najczęściej oglądane wpisy

Top Stories

Edytor Zdjęć Online – Darmowe Narzędzie do Edycji Obrazów

Macierz w Matematyce – Kalkulator Online

Kalkulator arytmetyczny międzysystemowy, konwerter systemów liczbowych oraz tekstu ASCII na Binarny

Prosty próbnik kolorów

Image Color Picker online

Zasada działania:

Jak wstawić próbnik kolorów na własną stronę?

Samodzielnie:

index.html

style.css

script.js

Może Ci się spodobać:

Grające pianino na stronę

Doom – strzelanka online

Zmień wymiary zdjęcia online. Gadżet na stronę

Rozbudowany kalkulator naukowy na stronę www