canwifhat PFP by @pronax464 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<canvas>Tag per disegnare grafica dinamica su pagine web.
animationDefinisce i parametri dell'animazione di un elemento o selettore
srcIndica la provenienza di una risorsa esterna (tramite URL).
formnovalidateImpedisce la convalida di un singolo elemento input
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form

Users

Log in to search for users

Explore

Find inspiration

inserimento immagini in un testo

spotify dashboard

Primo esercizio (26/01/2914)

Review of Functions I

SCHEDA 4 INFORMATICA

scheda pg scheletro

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="https://i.ibb.co/rfZNrQ1/favicon.png" type="image/png">
  <title>canwifhat PFP</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap" rel="stylesheet">
  <style>
    @font-face {
    font-family: "League Spartan", sans-serif;
    }


    body {
    margin: 1%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'League Spartan', sans-serif;  
    color: white;
    text-align: center;
    }

    #visionselector {
    margin-bottom: 12px;
    }

    #mustacheType {
    margin-left: 8px;
    padding: 1px 4px;
    }

    #container-wrapper {
    position: relative;
    }

    #canvas-container {
    position: relative;
    background-color: #343c49;
    overflow: hidden;
    }

    #prevMustache,
    #resetMustache,
    #nextMustache {
    background-color: #8f8f8f;
    color: #FFF;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    }

    #prevMustache:hover,
    #resetMustache:hover,
    #nextMustache:hover {
    background-color: #000;
    color: #fff;
    font-size: 14px;
    padding: 6px 10px;
    border: none;
    cursor: pointer;
    }

    #uploadButton,
    #saveButton {
    font-family: 'League Spartan', sans-serif; 
    margin: 16px;
    cursor: pointer;
    color: #000;
    background-color: #FFF;
    border: none;
    font-size: 18px;
    padding: 12px 12px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    }

    #uploadButton:hover,
    #saveButton:hover {
        background-color: #525252;
        color: #FFF;
    }

    #saveButton {
    display: none;
    }

    #closeButton {
    opacity: 0.5;
    cursor: pointer;
    font-size: 18px;
    border: 2px solid #fff;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    position: absolute;
    top: 2%;
    right: 2%;
    color: #000;
    background-color: #FFF;
    width: 40px;
    height: 40px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    }

    #closeButton:hover {
    opacity: 1;
    }


    .background {
    position: absolute;
    inset: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    background: #222831;

    }

    .footer {
    position: relative;
    margin-top: 60px;
    font-size: 12px;
    bottom: 2%;
    left: 0;
    width: 100%;
    color: #8f8f8f;
    text-align: center;
    }

    h1 {
    font-family: 'League Spartan', sans-serif; 
    font-size: 3rem;
    font-weight: 500;
    font-style: bold;
    margin-bottom: 0rem;
    }

    h1 a {
    color: #fff; /* Make the text color transparent */
    text-decoration: none;
    transition: color 0.3s ease-in-out;
    }

    h2 {
    font-family: 'League Spartan', sans-serif; 
    font-size: 1.5rem;
    color: #8f8f8f;
    font-weight: normal;
    margin-bottom: 12px;
    }

    .footer a {
    color: #8f8f8f;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
    }

    .footer a:hover,
    h1 a:hover {
    color: #6b6b6b;
    }

    @media screen and (max-width: 768px) {
    #container-wrapper {
        width: 100%;
    }
    #canvas-container {
        width: 100%;
        max-width: 350px;
        max-height: 350px;
        margin: auto;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .konvajs-content {
        width: 100%;
        max-width: 350px;
        height: auto;
        position: relative;
        user-select: none;
    }
    .konvajs-content canvas {
        width: 100% !important;
        height: auto !important;
        max-width: 350px;
        position: absolute;
        top: 0;
        left: 0;
    }
    
    h1 {
        font-size: 2rem;
    }

    .footer {
        font-size: 10px;
    }
    }

  </style>
</head>
<body>
  <h1>GET YOUR<a href="https://twitter.com/canwifcoin" target="_blank"> $CAN</a> HAT!</h1>
  <h2>Upload your pfp and tap to edit</h2>
    </div>
  </div>
  <div id="container-wrapper">
    <div id="canvas-container">
      <div class="konvajs-content" role="presentation"></div>
    </div>
    <button id="closeButton" style="display: none;">✖</button>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center">
    <button id="uploadButton">Upload Image</button>
    <button id="saveButton" style="display: none;">Save Image</button>
  </div>
  <script src="https://unpkg.com/konva@9.3.1/konva.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <script>
     let selectedMustacheIndex = 0; // Default mustache index

    // Array of mustache URLs
    const mustacheURLs = [
    "https://i.ibb.co/bm3gqLn/canwifhat.png",
    ];

    const cycleMustache = (direction) => {
    selectedMustacheIndex += direction;
    if (selectedMustacheIndex < 0) {
        selectedMustacheIndex = mustacheURLs.length - 1;
    } else if (selectedMustacheIndex >= mustacheURLs.length) {
        selectedMustacheIndex = 0;
    }
    changeMustacheType();
    };

    // Event listeners for cycling mustaches
    $("#prevMustache").click(() => cycleMustache(-1));
    $("#nextMustache").click(() => cycleMustache(1));

    // Function to change mustache type based on the selected index
    const changeMustacheType = () => {
    tr.visible(false); // Hide the transformer before destroying the existing mustache
    if (mustache) {
        mustache.destroy(); // Remove the existing mustache
    }
    addMustacheToCanvas(mustacheURLs[selectedMustacheIndex]); // Add the new mustache
    };

    $("#resetMustache").click(() => {
    selectedMustacheIndex = 1; // Reset mustache index to starting one
    changeMustacheType(); // Change mustache type to the starting one
    });

    let fixedCanvasWidth, maxCanvasHeight;

    if (window.innerWidth <= 768) {
    fixedCanvasWidth = 350;
    maxCanvasHeight = 350;
    } else {
    fixedCanvasWidth = 600;
    maxCanvasHeight = 600;
    }

    const stage = new Konva.Stage({
    container: "canvas-container",
    width: fixedCanvasWidth,
    height: maxCanvasHeight,
    });

    const layer = new Konva.Layer();
    stage.add(layer);

    let mustache;
    let canvasBorder;
    let tr;

    const addMustacheToCanvas = (mustacheImageSrc) => {
    if (mustache) {
        mustache.destroy();
        tr.destroy();
    }

    canvasBorder = new Konva.Rect({
        width: stage.width(),
        height: stage.height(),
    });

    layer.add(canvasBorder);

    Konva.Image.fromURL(mustacheImageSrc, (img) => {
        mustache = img;
        const aspectRatio = img.width() / img.height();

        let newMustacheWidth, newMustacheHeight;

        if (window.innerWidth <= 768) {
        newMustacheWidth = 200;
        newMustacheHeight = 200 / aspectRatio;
        } else {
        newMustacheWidth = 500;
        newMustacheHeight = 500 / aspectRatio;
        }

        if (newMustacheHeight > maxCanvasHeight) {
        newMustacheHeight = maxCanvasHeight;
        newMustacheWidth = maxCanvasHeight * aspectRatio;
        }

        mustache.setAttrs({
        width: newMustacheWidth,
        height: newMustacheHeight,
        x: (stage.width() - newMustacheWidth) / 2,
        y: (stage.height() - newMustacheHeight) / 2,
        name: "mustache",
        draggable: true,
        });

        tr = new Konva.Transformer({
        nodes: [mustache],
        enabledAnchors: [
            "top-left",
            "top-right",
            "bottom-left",
            "bottom-right",
        ],
        keepRatio: true,
        boundBoxFunc: (oldBox, newBox) => {
            if (
            Math.abs(newBox.width) < 10 ||
            Math.abs(newBox.height) < 10
            ) {
            return oldBox;
            }
            return newBox;
        },
        padding: 10,
        rotateEnabled: true,
        });

        mustache.on("click tap", () => {
        if (window.innerWidth <= 768) {
            tr.visible(!tr.visible());
            layer.batchDraw();
        } else {
            tr.visible(!tr.visible());
            layer.batchDraw();
        }
        });

        tr.visible(mustache.draggable()); // Set transformer visibility based on mustache draggable property

        layer.add(canvasBorder);
        layer.add(mustache);
        layer.add(tr);
        tr.visible(false);

        layer.batchDraw();
    });
    };

    const changeCanvasBackground = (imageSrc) => {
    const background = new Image();
    background.onload = function () {
        const aspectRatio = background.width / background.height;

        let newCanvasWidth = fixedCanvasWidth;
        let newCanvasHeight = fixedCanvasWidth / aspectRatio;

        if (newCanvasHeight > maxCanvasHeight) {
        newCanvasHeight = maxCanvasHeight;
        newCanvasWidth = maxCanvasHeight * aspectRatio;
        }

        stage.width(newCanvasWidth);
        stage.height(newCanvasHeight);

        canvasBorder.width(newCanvasWidth);
        canvasBorder.height(newCanvasHeight);

        const bg = new Konva.Image({
        image: background,
        width: newCanvasWidth,
        height: newCanvasHeight,
        });

        layer.destroyChildren();
        layer.add(bg);
        addMustacheToCanvas(mustacheURLs[selectedMustacheIndex]); // Add mustache based on the selected type
        layer.batchDraw();
        $("#uploadButton").hide();
        $("#closeButton").show();
        $("#saveButton").show();
    };
    background.src = imageSrc;
    };

    const saveCanvasAsImage = () => {
    tr.visible(false);
    layer.batchDraw();

    const dataURL = stage.toDataURL({
        mimeType: "image/png",
        quality: 1,
        pixelRatio: 3,
    });
    const a = document.createElement("a");
    a.href = dataURL;
    a.download = "send_canwifhat_to_1b.png";
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);

    tr.visible(true);
    layer.batchDraw();
    };

    const resetCanvas = () => {
    $("#uploadButton").show();
    addMustacheToCanvas(mustacheURLs[selectedMustacheIndex]); // Add mustache based on the selected type
    $("#closeButton").hide();
    $("#saveButton").hide();
    layer.destroyChildren();
    stage.width(fixedCanvasWidth);
    stage.height(maxCanvasHeight);
    canvasBorder = new Konva.Rect({
        width: stage.width(),
        height: stage.height(),
    });
    layer.add(canvasBorder);
    layer.batchDraw();
    };

    $(document).ready(function () {
    $("#closeButton").hide();
    $("#saveButton").hide();
    addMustacheToCanvas(mustacheURLs[selectedMustacheIndex]); // Add mustache based on the selected type
    });

    $("#uploadButton").click(function () {
    const input = document.createElement("input");
    input.type = "file";
    input.accept = "image/*";

    input.addEventListener("change", (event) => {
        const file = event.target.files[0];
        if (file) {
        const reader = new FileReader();
        reader.onload = function (event) {
            const imageSrc = event.target.result;
            changeCanvasBackground(imageSrc);
        };
        reader.readAsDataURL(file);
        }
    });

    input.click();
    });

    $("#saveButton").click(function () {
    saveCanvasAsImage();
    });

    $("#closeButton").click(function () {
    resetCanvas();
    });

  </script>
  <div class="absolute inset-0 -z-10 h-full w-full bg-gradient-to-br from-gray-200 via-gray-300 to-white"></div>

  <div class="background"></div>

</body>
</html>