تصاویر را به صورت url می گذارم دکمه ذخیره اش کار نمی کنه
سلام چرا وقتی لینک های تصاویر را به صورت urlمی گذارم دکمه ذخیره اش کار نمی کنه کار نمی کند
آدرس تصویر جلد:https://molanaali.ir/wp-content/uploads/2023/06/cover-1.png
ثبت پرسش جدید
پاسخ‌ها
2
درود خوبی...
کد ناخواناست
کد رو داخل دو تا ``` قرار دهید...
سلام چرا وقتی لینک های تصاویر را به صورت 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="https://roocket.ir/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]);
}
});گفتگوهای مرتبط
شاید پاسخ شما همین‌جا باشد