0
Kayıt Ol

Konu Tasarımına HTML kod ekleme, ya da HTML kodu dönüştürme.

7

●

162

  • 29-08-2025, 23:54:52
    #1
    thebestways
    thebestways
    Selamlar hocalarım, bir HTML kodlu tasarımım var, bunu burada kullanamıyorum.
    GIF yapamıyorum,
    PNG ile kalite bozuluyor,
    HTML koduyla tasarımı nasıl çalıştırabilirim?
    ya da ne yapmam gerekiyor bu tasarımı burada kullanabilmem için?
  • Kabul Edilen Cevap
    • Muhammet
      1 Beğeni
      Mesaja Git
      thebestways adlı üyeden alıntı: mesajı görüntüle
        • Sayfada herhangi bir yere sağ tıklayıp "İncele" deyin veya F12 tuşuna basın.
        • Ctrl + Shift + P tuşlarına basın.
        • Açılan komut satırına screenshot yazın ve çıkan seçeneklerden "Capture full size screenshot" (Tam boyutlu ekran görüntüsü yakala) seçeneğine tıklayın.
      • Tarayıcı, tüm sayfanın tek bir PNG dosyası olarak indirilmesini sağlayacaktır.
      bende diyordum videolarda web site tasarımlarında bu kadar uzun ekran görüntüsünü nasıl alıyorlar bilmediğim bir şeyi öğrendim bende
  • 30-08-2025, 00:00:47
    #2
    omergundogar
    omergundogar
    Genelde png kullanılır
  • 30-08-2025, 00:01:45
    #3
    thebestways
    thebestways
    omergundogar adlı üyeden alıntı: mesajı görüntüle
    Genelde png kullanılır
    ne kullanılacağının bir önemi yok hocam, elimde konu tasarımı var ve HTML kod halinde, bunu nasıl kullanacağımı bilmiyorum siz biliyor musunuz?
  • 30-08-2025, 00:06:27
    #4
    Muhammet
    Muhammet
    hocam selam, kodunuzu chat gpt gibi yapay zeka araçlarına ileterek xenforo veya vbullettin konu açmaya uyumlu hale getirir misin diyerek test etme şansınız var mı? normalde konu açarken "kaynaklar" ikonu mevcut üst menüde burada ama muhtemelen denemişsinizdir onu dediğimi deneyin isterseniz her şeyi yapıyor onuda yapsın bir zahmet
  • 30-08-2025, 00:08:25
    #5
    omergundogar
    omergundogar
    Aşağıdaki kodu html şablonunuz için düzenlerseniz png olarak arkaplanı şeffaf şekilde alabilirsiniz

    <div id="capture" style="background: transparent;">
  <!-- HTML şablonun -->
</div>
<button id="snap">PNG yap</button>

<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<script>
document.getElementById('snap').addEventListener('click', async () => {
  const el = document.getElementById('capture');
  const canvas = await html2canvas(el, {
    backgroundColor: null, // şeffaflık için
    scale: 2
  });
  const png = canvas.toDataURL('image/png');
  const a = document.createElement('a');
  a.href = png;
  a.download = 'capture.png';
  a.click();
});
</script>
  • 30-08-2025, 00:30:50
    #6
    thebestways
    thebestways
    Çok zor oldu, 1 saattir uğraşıyorum ama çok farklı bir yöntem buldum ve yaptım
    konu linkini atarım az sonra hocam kontrol edersiniz.
  • 30-08-2025, 00:34:44
    #7
    thebestways
    thebestways
    omergundogar adlı üyeden alıntı: mesajı görüntüle
    Aşağıdaki kodu html şablonunuz için düzenlerseniz png olarak arkaplanı şeffaf şekilde alabilirsiniz

    &lt;div id=&quot;capture&quot; style=&quot;background: transparent;&quot;&gt;
  &lt;!-- HTML şablonun --&gt;
&lt;/div&gt;
&lt;button id=&quot;snap&quot;&gt;PNG yap&lt;/button&gt;

&lt;script src=&quot;https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
document.getElementById('snap').addEventListener('click', async () =&gt; {
  const el = document.getElementById('capture');
  const canvas = await html2canvas(el, {
    backgroundColor: null, // şeffaflık için
    scale: 2
  });
  const png = canvas.toDataURL('image/png');
  const a = document.createElement('a');
  a.href = png;
  a.download = 'capture.png';
  a.click();
});
&lt;/script&gt;
    Muhammet adlı üyeden alıntı: mesajı görüntüle
    hocam selam, kodunuzu chat gpt gibi yapay zeka araçlarına ileterek xenforo veya vbullettin konu açmaya uyumlu hale getirir misin diyerek test etme şansınız var mı? normalde konu açarken &quot;kaynaklar&quot; ikonu mevcut üst menüde burada ama muhtemelen denemişsinizdir onu dediğimi deneyin isterseniz her şeyi yapıyor onuda yapsın bir zahmet
      • Sayfada herhangi bir yere sağ tıklayıp "İncele" deyin veya F12 tuşuna basın.
      • Ctrl + Shift + P tuşlarına basın.
      • Açılan komut satırına screenshot yazın ve çıkan seçeneklerden "Capture full size screenshot" (Tam boyutlu ekran görüntüsü yakala) seçeneğine tıklayın.
    • Tarayıcı, tüm sayfanın tek bir PNG dosyası olarak indirilmesini sağlayacaktır.
  • 30-08-2025, 00:38:16
    #8
    Bu cevap, konu sahibi tarafından kabul edilebilir bir cevap olarak işaretlendi.
    Muhammet
    Muhammet
    thebestways adlı üyeden alıntı: mesajı görüntüle
      • Sayfada herhangi bir yere sağ tıklayıp "İncele" deyin veya F12 tuşuna basın.
      • Ctrl + Shift + P tuşlarına basın.
      • Açılan komut satırına screenshot yazın ve çıkan seçeneklerden "Capture full size screenshot" (Tam boyutlu ekran görüntüsü yakala) seçeneğine tıklayın.
    • Tarayıcı, tüm sayfanın tek bir PNG dosyası olarak indirilmesini sağlayacaktır.
    bende diyordum videolarda web site tasarımlarında bu kadar uzun ekran görüntüsünü nasıl alıyorlar bilmediğim bir şeyi öğrendim bende