JavaScript ile dinamik fotoğraf yapma

umutalper11 · 6 Ocak 2021

Gaziantep Ticaret Odası gibi bir site yapmak istiyorum.
Acil, yardımcı olursanız çok mutlu olurum. İyi akşamlar.
Bir arkadaş canvas ile demişti ama ben var olan bir resimde sadece bir yazıyı değiştirmek istiyorum.

300319 · 6 Ocak 2021

umutalper11 dedi:
Gaziantep Ticaret Odası gibi bir site yapmak istiyorum.
Acil, yardımcı olursanız çok mutlu olurum. İyi akşamlar.
Bir arkadaş canvas ile demişti ama ben var olan bir resimde sadece bir yazıyı değiştirmek istiyorum.

Hocam js içinde random komutu var bir dizi oluşturun içerisine bir dizi resimleri ekleyin ve random algoritmasını kurun her sayfa yenilendiğinde rastgele resim seçsin.

umutalper11 · 6 Ocak 2021

300319 dedi:
Hocam js içinde random komutu var bir dizi oluşturun içerisine bir dizi resimleri ekleyin ve random algoritmasını kurun her sayfa yenilendiğinde rastgele resim seçsin.

Kullanıcının girdiği ismi bir değişkene atayacağım. Mesela bir resimde "Merhaba Umut" yazıyor. Kullanıcı adını Ahmet girerse "Merhaba Ahmet" olarak değiştirmek istiyorum.

300319 · 6 Ocak 2021

umutalper11 dedi:
Kullanıcının girdiği ismi bir değişkene atayacağım. Mesela bir resimde "merhaba umut" yazıyor. Kullanıcı adını Ahmet girerse "merhaba Ahmet" olarak değiştirmek istiyorum.

JavaScript:

var x = document.getElementById("myText");

Textbox'ı bir ID değeri verin ve mytext ID'si gibi verdiğiniz değeri yazın sonra butona basınca ekrana innerHTML metodu ile yazdırın.

umutalper11 · 6 Ocak 2021

300319 dedi:
JavaScript:

var x = document.getElementById("myText");

Textbox'ı bir ID değeri verin ve mytext ID'si gibi verdiğiniz değeri yazın sonra butona basınca ekrana innerHTML metodu ile yazdırın.

Ekrana yazdırmak sorun değil o kadarını biliyorum. Sorun herhangi bir resime entegre etmek.

eneskt · 6 Ocak 2021

Karşınıza çıkan fotoğraf dinamik fotoğraf olmayabilir. Görünen fotoğraf aslında bir HTML teması olup bilgiler girildikten sonra arkada IMG olarak render edilip gösteriliyor olabilir.

Bu konu hakkında Stackoverflow'da sorulmuş bir soruyu aşağıya bırakacağım,ayrıca Canvas ile dediğinizin yapılıyor olması lazım detaylı olarak incelediniz mi ?

Stackoverflow Link

Netluckie · 7 Ocak 2021

Bir arkadaş canvas ile demişti ama ben var olan bir resimde sadece bir yazıyı değiştirmek istiyorum.

Zaten örnek olarak attığınız site de aynı mantıkla işliyor, X değerini var olan canvas tasarımı üzerine ekleyebilirsiniz. Biraz araştırıp yapabileceğiniz bir şeydi.

Edit: Sizin için çok temel bir biçimde örnekledim, kendiniz tasarım ve görsel bütünlüğe göre şekillendirmelisiniz.

JavaScript:

        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var imageObj = new Image();
        var adsoyad= 'alperturan11'; //Kullanıcıdan input ile alınan data
        var aciklama ="Konu ile ilgili açıklama metni" //local ya da DB verisi
        imageObj.onload = function(){
          context.drawImage(imageObj, 0, 0);
          context.font = "26pt Calibri";
          context.fillText("Sevgili "+adsoyad+"", 60, 100, imageObj.width/2, imageObj.height / 2);
          context.fillText(aciklama, 60, 180, imageObj.width/2, imageObj.height / 2);
          context.fillText("imza", 650, 450, imageObj.width/2, imageObj.height / 2);
        };

         //Basit bir döngü ile farklı arkaplanlar random yerleştirilebilir.
        imageObj.src = 'https://i4.hurimg.com/i/hurriyet/75/1110x740/5dc453677152d800c88b12d0.jpg';

Technopath Dinamik Resim - JSFiddle - Code Playground

JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.

jsfiddle.net

JavaScript ile dinamik fotoğraf yapma

Ayrıntılı düzenleme

umutalper11

Picopat

300319

Zettapat

umutalper11

Picopat

300319

Zettapat

umutalper11

Picopat

eneskt

Hectopat

Netluckie

Hectopat

Technopath Dinamik Resim - JSFiddle - Code Playground

Benzer konular

Technopat Haberler

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz