canwifhat PFP by @pronax464 - Codewith.it

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

References

rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
postDefinisce un metodo di invio di dati al server
selectedPre-seleziona un elemento di input
downloadConsente di scaricare file al click di collegamento ipertestuale.
<aside>Definisce un contenuto separato dal testo perincipale
<ol>Crea liste ordinate o numerate.

Users

Log in to search for users

Explore

Find inspiration

Collegamenti ipertestuali

Form di Registrazione

“esercitazione4.html”

Vendi Casa ad Ardea in 90 Giorni F

sanchez ximena html 3

Esempio di Font Size in VW

form per il torneo misto disfor s

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>