Kirjautuminen

Haku

Tehtävät

Keskustelu: Koodit: JavaScript: colorpicker

AtskaFin [10.06.2019 21:18:44]

#

Tein javascriptiä käyttäen colorpickerin.

En löytänyt ratkaisua siihen, että kun sivua pienennetään, niin ohjelma näyttää värejä vääristä paikoista. Koodeja saa 'haukkua' :D

HTML:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta charset="UTF-8">
        <title>Colorpicker</title>
    </head>

    <body>
            <h1>
                <span style='color: #483FF6'>C</span>
                <span style='color: red'>o</span>
                <span style='color: yellow'>l</span>
                <span style='color: #483FF6'>o</span>
                <span style='color: green'>r</span>
                <span style='color: yellow; margin-left: 20px'>p</span>
                <span style='color: #483FF6'>i</span>
                <span style='color: red'>c</span>
                <span style='color: yellow'>k</span>
                <span style='color: #483FF6'>e</span>
                <span style='color: green'>r</span>
            </h1>

        <input type="file" name="file" class="inputfile" accept="image/*" onchange="updateImage(event)">
        <hr>
        <canvas id="test-image" width="400" height="300"></canvas>
        <hr>
        <canvas id="colors" width="60" height="60"></canvas>
        <div class="tb">
            <div id="choosed-color"></div>
            <button id="copy"><strong>Copy to clipboard</strong></button>
        </div>

        <footer>
            <p class="copyright">AtskaFin</p>
        </footer>
        <script src="code.js"></script>
    </body>
</html>

CSS:

html {
    background: rgb(182, 70, 70);
    overflow: hidden;
}

body {
    background: whitesmoke;
    height: 100vh;
    margin: 0;
    width: 50vw;
    margin: auto;
    border: 2px solid #101010;
    text-align: center;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif !important;
}

h1 span {
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    font-size: 3rem;
}

canvas {
    background: white;
    cursor: pointer;
}

#test-image {
    border: 2px solid #242323;
}

#colors {
    border: 1px solid #242323;
}

#choosed-color {
    border: 1px solid #242323;
    width: 100px;
    height: 30px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    background: white;
    font-size: 1.3rem;
}

.tb {
    display: table;
    margin-left:auto;
    margin-right:auto;
    padding: 10px;
}

.tb button:before {
    content: '+ ';
}

.tb button {
    display: table-cell;
    height: 32px;
    margin-left: 10px;
    background: white;
    border: 1px solid black;
    color: black;
    padding: 5px 10px;
    transition: background-color 0.1s;
}

.tb button:hover {
    background: black;
    color: white;
}

footer {
    text-align: center;
    background-color: #424242;
    font-size: 1.5rem;
    margin-top: 5rem;
    padding: 20px;
    border-top: 1px solid #303030;
    box-shadow: 0 -2px 0 #212121;
    color: whitesmoke;
}



.copyright {
    margin: 0;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.copyright:before {
    content: 'Ⓒ';
    margin-right: 10px;
}

@media (max-width: 576px) {
    body { width: 100%;}
    #test-image { width: 95%;}
    h1 span {
        font-size: 2rem;
    }
}

@media (min-width: 576px) {
    footer {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
    }
}

JS:

function el(id) { return document.getElementById(id); }

const testImage = el('test-image');
const testImageCtx = testImage.getContext('2d');
const colorCanvas = el('colors');
const colorCanvasCtx = colorCanvas.getContext('2d');
const choosedColor = el('choosed-color');
const copyBtn = el('copy');
var freeze = false;
var started = false;

function updateImage (event) {

    testImageCtx.beginPath();
    testImageCtx.fillStyle = 'whitesmoke';
    testImageCtx.fillRect(0, 0, testImage.width, testImage.height);
    testImageCtx.closePath();

    let reader = new FileReader();
    reader.onload = (e) => {
        let img = new Image();
        img.onload = () => {
            testImageCtx.drawImage(img, 0, 0, img.width,       img.height,
                                        0, 0, testImage.width, testImage.height);
        }
        img.src = e.target.result;
    }
    reader.readAsDataURL(event.target.files[0]);
    started = true;
    freeze = false;
}

function rgbToHex(r, g, b) {
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

function drawColor (color, x, y) {
    colorCanvasCtx.beginPath();
    colorCanvasCtx.fillStyle = color;
    colorCanvasCtx.fillRect(x * 12, y * 12, 12, 12);
    colorCanvasCtx.closePath();
}

function drawColors (pieces) {
    for(let a = 0; a < Math.sqrt(pieces.length); a++) {
        drawColor(pieces[a * 5], 0, a);
        drawColor(pieces[a * 5 + 1], 1, a);
        drawColor(pieces[a * 5 + 2], 2, a);
        drawColor(pieces[a * 5 + 3], 3, a);
        drawColor(pieces[a * 5 + 4], 4, a);
    }
}

testImage.addEventListener('mousemove', (event) => {
    if(started && !freeze) {
        let imgData = testImageCtx.getImageData(event.offsetX - 2, event.offsetY - 2, 5, 5);
        let data = imgData.data;
        let pieces = [];
        for(let i = 0; i < 25; i++) {
            pieces.push(rgbToHex(data[i * 4], data[i * 4 + 1], data[i * 4 + 2]));
        }
        drawColors(pieces);
    }
});

testImage.addEventListener('click', () => {
    if(started) {
        freeze = !freeze;

        // Asetetaan hiiren kohdalla oleva pikseli valituksi
        let imgData = colorCanvasCtx.getImageData(30, 30, 1, 1);
        let data = imgData.data;
        let HEX = rgbToHex(data[0], data[1], data[2])
        choosedColor.style.backgroundColor = HEX;
        choosedColor.innerHTML = HEX;
    }
});

colorCanvas.addEventListener('click', (event) => {
    if(started) {
        let imgData = colorCanvasCtx.getImageData(event.offsetX, event.offsetY, 1, 1);
        let data = imgData.data;
        let HEX = rgbToHex(data[0], data[1], data[2])
        choosedColor.style.backgroundColor = HEX;
        choosedColor.innerHTML = HEX;
    }
});

copyBtn.addEventListener('click', () => {
    var range = document.createRange();
    range.selectNode(choosedColor);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);

    if(range == '') {
        alert('Choose color!');
    }
    else {
        document.execCommand("copy");
        alert('copied: ' + range);
    }

    window.getSelection().removeAllRanges();
});

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Tietoa sivustosta