اين کد ها را چه گونه در ورد پرس قرار دهم

<!DOCTYPE html>
<html lang="fa">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="files/css/style.css">
  <title>غدیر | ترکیب عکس</title>
</head>

<body>
  <center>
    <div class="container">
      <img id="background-image" src="files/img/nemone.jpg" alt="" class="background-image">
      <img id="overlay-image" src="files/img/cover.jpg" alt="" class="overlay-image">
            </div><br>
    <div class="button">
      <button id="save-button" class="button-style">ذخیره</button>
      <input type='file' id="file-input" class="file-label button-style"  value="متن دلخواه">
    </div>
  </center>

  <!-- java script -->
  <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
  <script src="files/js/script.js" ></script>

</body>

</html>

body {
    background-image: url(../img/r9txq1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 600px;
}

.container {
    position: relative;
    display: inline-block;
    margin-top: 130px;
}

.overlay-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.background-image {
    width: 180px;
    height: 180px;
}

.dsy {
    display: inline-block;
}

.file-label {
    color: #00640000;
}

.button {
    margin-top: 20px;
    margin-left: 170px;
}

img{
    border-radius: 100px;
}

.logo{
    max-width: 200px;
}

document.getElementById('save-button').addEventListener('click', function() {
    // گرفتن تصویر‌های پس‌زمینه و روی‌آن
    var backgroundImage = document.getElementById('background-image');
    var overlayImage = document.getElementById('overlay-image');

    // ساخت کانوس
    var canvas = document.createElement('canvas');
    canvas.width = backgroundImage.width;
    canvas.height = backgroundImage.height;

    // رسم تصویر‌ها بر روی کانوس
    var context = canvas.getContext('2d');
    context.drawImage(backgroundImage, 0, 0, backgroundImage.width, backgroundImage.height);
    context.drawImage(overlayImage, 0, 0, backgroundImage.width, backgroundImage.height);

    // تبدیل تصویر به فرمت Base64
    var dataURL = canvas.toDataURL();

    // ایجاد پیوند دانلود
    var downloadLink = document.createElement('a');
    downloadLink.href = dataURL;
    downloadLink.download = 'پروفایل غدیر.png';
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
});

// کد بارگذاری عکس پس‌زمینه
document.querySelector('#file-input').addEventListener('change' ,  function () {
    if (this.files && this.files[0]) {
        const reader = new FileReader();

        reader.onload = function (e) {
            $('#background-image')
                .attr('src', e.target.result)
                .width(180)
                .height(180);
        };

        reader.readAsDataURL(this.files[0]);
    }
});

ثبت پرسش جدید

ابوالفضل زارعی

تخصص : سئو

@abolfazlzarei 10 ماه پیش مطرح شد

بخش استایل را توی فایل style.css قرا دهید

ارسال پاسخ

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام

دوره‌های آموزشی

مسیرهای یادگیری

پیشرفت من

دوره‌های رایگان

گواهی پایان دوره

اين کد ها را چه گونه در ورد پرس قرار دهم

گزینش سوالات

گفت و گو های مرتبط

دسته ‌بندی سوالات

تگ‌های محبوب

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید