Fotoğraf Üzerine Metin Ekleme

/* PhotoEditor.css */

.container {

    display: flex;

    flex-direction: column;

    align-items: center;

    margin-top: 20px;

  }

  .image-preview {

    max-width: 500px;

    margin-bottom: 20px;

  }

  .input-container {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    margin-bottom: 20px;

  }

  .input-container label {

    margin-bottom: 5px;

  }

  .input-container input {

    margin-bottom: 10px;

  }

  .result-image {

    max-width: 500px;

  }

// PhotoEditor.razor

var PhotoEditorBase = (function () {

    function PhotoEditorBase() {

        this.selectedImage = null;

        this.editedImage = null;

        this.text = "";

        this.xPosition = 0;

        this.yPosition = 0;

    }

    PhotoEditorBase.prototype.handleFileUpload = function (e) {

        var _this = this;

        var file = e.target.files[0];

        var reader = new FileReader();

        reader.onload = function (event) {

            _this.selectedImage = event.target.result;

        };

        reader.readAsDataURL(file);

    };

    PhotoEditorBase.prototype.addText = function () {

        var _this = this;

        // Metni fotoğraf üzerine ekleyen ve konumlandıran kod buraya gelecek

        var image = new Image();

        image.src = this.selectedImage;

        image.onload = function () {

            var canvas = document.createElement("canvas");

            var context = canvas.getContext("2d");

            canvas.width = image.width;

            canvas.height = image.height;

            context.drawImage(image, 0, 0);

            context.font = "24px Arial";

            context.fillStyle = "#FFFFFF";

            context.textBaseline = "top";

            context.fillText(_this.text, _this.xPosition, _this.yPosition);

            _this.editedImage = canvas.toDataURL();

        };

    };

    return PhotoEditorBase;

}());

// PhotoEditor.razor.js

var photoEditor = new PhotoEditorBase();

document.querySelector("#your-blazor-app-root").innerHTML = `

    <h3>Photo Editor</h3>

    <p>Yüklemek istediğiniz fotoğrafı seçin:</p>

    <input type="file" onchange="photoEditor.handleFileUpload(event)" accept=".jpg, .jpeg, .png" />

    ${photoEditor.selectedImage !== null ? `

        <div>

            <img src="${photoEditor.selectedImage}" style="max-width: 500px;" />

            <div>

                <label for="text">Metni girin:</label>

                <input type="text" id="text" oninput="photoEditor.text = this.value" />

                <label for="xPos">X Pozisyonu:</label>

                <input type="number" id="xPos" oninput="photoEditor.xPosition = parseInt(this.value)" />

                <label for="yPos">Y Pozisyonu:</label>

                <input type="number" id="yPos" oninput="photoEditor.yPosition = parseInt(this.value)" />

                <button class="btn btn-primary" onclick="photoEditor.addText()">Metni Ekle</button>

            </div>

        </div>

    ` : ""}

    ${photoEditor.editedImage !== null ? `

        <div>

            <p>Fotoğraf üzerine eklenen metin:</p>

            <img src="${photoEditor.editedImage}" style="max-width: 500px;" />

        </div>

    ` : ""}

`;