فاطمه علی داد
1 سال پیش
توسط فاطمه علی داد
مطرح شد
تصاویر را به صورت url می گذارم دکمه ذخیره اش کار نمی کنه
سلام چرا وقتی لینک های تصاویر را به صورت urlمی گذارم دکمه ذخیره اش کار نمی کنه کار نمی کند
آدرس تصویر جلد:https://molanaali.ir/wp-content/uploads/2023/06/cover-1.png
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
![user-avatar]()
گزارش تخلف
کپی کردن
0
گزارش تخلف
کپی کردن
0
سلام چرا وقتی لینک های تصاویر را به صورت urlمی گذارم دکمه ذخیره اش کار نمی کنه کار نمی کند
آدرس تصویر جلد:https://molanaali.ir/wp-content/uploads/2023/06/cover-1.png
کد های html:
<!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>کدهای css:
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;
}کدهای js:
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]);
}
});