soiz1/map-editor
0
1 2<!DOCTYPE html>3<html lang="ja">4<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>画像ダウンロード</title>8 <style>9 body {10 font-family: Arial, sans-serif;11 background-color: #f4f4f9;12 margin: 0;13 padding: 0;14 display: flex;15 flex-wrap: wrap;16 justify-content: center;17 gap: 20px;18 padding: 20px;19 }20 21 .image-box {22 border: 2px solid #ddd;23 border-radius: 10px;24 padding: 15px;25 background-color: #fff;26 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);27 text-align: center;28 max-width: 300px;29 transition: transform 0.2s ease, box-shadow 0.2s ease;30 }31 32 .image-box:hover {33 transform: translateY(-5px);34 box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);35 }36 37 .image-box img {38 height: 100px;39 width: auto; 40 border-radius: 5px;41 object-fit: cover;42 }43 44 .download-button, .copy-button {45 margin-top: 10px;46 display: inline-block;47 padding: 12px 25px;48 background-color: #4CAF50;49 color: white;50 text-decoration: none;51 border-radius: 25px;52 font-size: 16px;53 transition: background-color 0.3s ease, transform 0.2s ease;54 }55 .copy-button{56 background-color: #4287f5 !important;57 cursor: pointer;58 }59 60 .download-button:hover, .copy-button:hover {61 background-color: #45a049;62 transform: translateY(-2px);63 64 }65 66 #loading {67 position: fixed;68 top: 0;69 left: 0;70 width: 100%;71 height: 100%;72 background-color: rgba(255, 255, 255, 0.8);73 display: flex;74 justify-content: center;75 align-items: center;76 font-size: 24px;77 color: #333;78 z-index: 1000;79 transition: opacity 1s ease, visibility 1s ease; /* フェードアウトのためのスタイル */80 }81 82 #loading.hidden {83 opacity: 0;84 visibility: hidden;85 }86 </style>87</head>88<body>89 90<!-- ローディング表示 -->91<div id="loading">Loading...</div>92 93<script>94let number = 60; // 画像の数95let imagesLoaded = 0; // 読み込まれた画像の数96 97for (let i = 1; i <= number; i++) {98 let imageBox = document.createElement('div');99 imageBox.className = 'image-box';100 101 let img = document.createElement('img');102 img.src = location.origin + "/marker/" + i + ".png";103 img.alt = "画像";104 105 img.onload = function() {106 imagesLoaded++;107 if (imagesLoaded === number) {108 setTimeout(function() {109 document.getElementById('loading').classList.add('hidden');110 }, 500);111 }112 };113 114 // ダウンロードリンクを作成（ループ内に配置）115 let downloadLink = document.createElement('a');116 downloadLink.href = img.src; // 画像のURLを直接指定117 downloadLink.download = 'marker_' + i + '.png';118 downloadLink.className = 'download-button';119 downloadLink.textContent = 'ダウンロード';120 121 // コピーリンクボタンを作成（ループ内に配置）122 let copyButton = document.createElement('button');123 copyButton.className = 'copy-button';124 copyButton.textContent = 'URLをコピー';125 126 copyButton.onclick = function() {127 navigator.clipboard.writeText(img.src).then(function() {128 alert('URLがコピーされました: \n' + img.src);129 }).catch(function(err) {130 alert('コピーに失敗しました: ' + err);131 });132 };133 134 // 各要素を `imageBox` に追加135 imageBox.appendChild(img);136 imageBox.appendChild(document.createElement('br'));137 imageBox.appendChild(downloadLink);138 imageBox.appendChild(document.createElement('br'));139 imageBox.appendChild(copyButton);140 141 // `body` に `imageBox` を追加142 document.body.appendChild(imageBox);143}144</script>145 146 147</body>148</html>149