Hoş Geldiniz! Bu uygulama, fotoğraflarınıza metin eklemeyi kolaylaştırır ve metni fotoğrafın istediğiniz konumuna yerleştirmenizi sağlar.
İşte uygulamanın temel işlevleri:
Metin Ekleme , Fotoğraf Seçme , Metin Özelleştirme , Metni Konuma Alma ,Diğer Düzenlemeler , Kaydetme ve Paylaşma
Fotoğraf Seçme:
Uygulama, fotoğraflarınızı seçmeniz için bir seçenek sunar. Bunun için galerinizi tarayabilir veya doğrudan uygulama içinde fotoğraf çekebilirsiniz.
Metin Ekleme:
Seçtiğiniz fotoğrafın üzerinde metin eklemek için uygulama size bir metin kutusu sunar. Metin kutusuna istediğiniz metni girebilirsiniz. Başlık, açıklama, alıntı veya herhangi bir metin türünü kullanabilirsiniz.
Metin Özelleştirme:
Uygulama, metin stilini ve görüntülenme özelliklerini özelleştirmek için çeşitli düzenleme araçları sunar. Yazı tipini, boyutunu, renkini ve hizalama seçeneklerini ayarlayabilirsiniz. Böylece metnin görünümünü fotoğrafa uygun hale getirebilirsiniz.
Metni Konuma Alma:
Eklediğiniz metni istediğiniz konuma taşıyabilir veya yeniden boyutlandırabilirsiniz. Sürükle-bırak yöntemini kullanarak metni fotoğraf üzerinde istediğiniz gibi yerleştirebilirsiniz. Böylece metni fotoğrafın en uygun noktasına yerleştirebilirsiniz.
Diğer Düzenlemeler:
Metni ekledikten sonra, isterseniz fotoğraf üzerinde diğer düzenlemeleri de yapabilirsiniz. Örneğin, kontrast ayarını değiştirebilir, filtreler uygulayabilir veya fotoğrafın renklerini düzenleyebilirsiniz.
Kaydetme ve Paylaşma:
Son düzenlemelerinizi kaydedebilir ve fotoğrafı istediğiniz yerde paylaşabilirsiniz. Uygulama genellikle sosyal medya platformlarına veya galerinize doğrudan paylaşma seçenekleri sunar.
Bu uygulama, fotoğraflarınızı daha ilgi çekici hale getirmek ve metinlerle anlatımınızı desteklemek için mükemmel bir araçtır. Ayrıca, işletmeler veya pazarlamacılar için ürünlerin veya hizmetlerin tanıtımında dikkat çekici içerikler oluşturmak için de kullanılabilir.
/* 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>
` : ""}
`;
HAZIRLAYAN : HÜSEYİN KARAKOÇ / 22430070027