1.8-11:图像旋转

该博客介绍了一个C++程序,用于接收一个n行m列的黑白图像,将其顺时针旋转90度,并输出结果。程序首先读取图像数据,然后通过双重循环实现旋转操作,最后按顺序输出旋转后的图像数据。

总时间限制: 

1000ms

内存限制: 

65536kB

描述

输入一个n行m列的黑白图像,将它顺时针旋转90度后输出。

输入

第一行包含两个整数n和m,表示图像包含像素点的行数和列数。1 <= n <= 100,1 <= m <= 100。
接下来n行,每行m个整数,表示图像的每个像素点灰度。相邻两个整数之间用单个空格隔开,每个元素均在0~255之间。

输出

m行,每行n个整数,为顺时针旋转90度后的图像。相邻两个整数之间用单个空格隔开。

样例输入

3 3
1 2 3
4 5 6
7 8 9

样例输出

7 4 1
8 5 2
9 6 3

代码

#include<bits/stdc++.h>
using namespace std;
int n,m,a[110][110];
int main()
{
	cin>>n>>m;
	for(int i=1;i<=n;i++)
	{
		for(int j=1;j<=m;j++)
		{
			cin>>a[i][j];
		}
	}
	for(int j=1;j<=m;j++)
	{
		for(int i=n;i>=1;i--)
		{
			cout<<a[i][j]<<" ";
		}
		cout<<endl;
	}
}

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>🎨 AI 图片生成器 - 智能图像创作平台</title> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet"> <style> :root { --primary: #6a11cb; --secondary: #2575fc; --accent: #ff6f61; --light: rgba(255, 255, 255, 0.9); --dark-bg: #1a1a2e; --card-bg: rgba(255, 255, 255, 0.12); --shadow: 0 8px 32px rgba(0, 0, 0, 0.15); --transition: all 0.3s ease; } * { box-sizing: border-box; } body { font-family: 'Noto Sans SC', 'Segoe UI', sans-serif; margin: 0; padding: 0; background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; min-height: 100vh; position: relative; } /* 渐变背景粒子效果 */ body::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://particles.js.org/images/background.png'); opacity: 0.05; pointer-events: none; z-index: -1; } header { background: rgba(0, 0, 0, 0.4); padding: 1.2rem; text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,0.2); backdrop-filter: blur(10px); } h1 { margin: 0; font-size: 2.2rem; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,0.3); } nav a { color: white; margin: 0 18px; text-decoration: none; font-weight: 500; font-size: 1.1rem; transition: var(--transition); } nav a:hover { text-decoration: underline; text-shadow: 0 1px 6px rgba(255,255,255,0.5); } main { display: flex; flex-wrap: wrap; gap: 2rem; padding: 0 1rem; justify-content: center; } .input-section { flex: 1 1 400px; max-width: 500px; } .gallery-section { flex: 2 1 600px; max-width: 800px; } .container { background: var(--card-bg); border-radius: 16px; padding: 2rem; box-shadow: var(--shadow); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); } h2 { font-size: 1.5rem; margin-top: 0; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,0.3); } p.example { font-size: 0.95rem; opacity: 0.8; margin-bottom: 1.2rem; } label { display: block; margin-top: 1rem; font-size: 1.1rem; font-weight: 500; } input[type="text"], select { width: 100%; padding: 14px; margin: 0.5rem 0; border: none; border-radius: 8px; font-size: 1rem; background: rgba(255, 255, 255, 0.2); color: white; outline: none; transition: var(--transition); } input[type="text"]::placeholder { color: rgba(255,255,255,0.6); } input[type="text"]:focus { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); } button { margin-top: 1.5rem; padding: 14px 28px; background: var(--accent); color: white; border: none; border-radius: 8px; font-size: 1.1rem; cursor: pointer; transition: var(--transition); font-weight: 600; width: 100%; } button:hover { background: #e05a4f; transform: translateY(-2px); box-shadow: 0 6px 14px rgba(255,111,97,0.4); } button:active { transform: translateY(0); } #result { margin-top: 1.5rem; text-align: center; min-height: 200px; } #result.loading { color: rgba(255,255,255,0.8); font-style: italic; } #result img { max-width: 100%; max-height: 400px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.3); border: 4px solid rgba(255,255,255,0.2); margin: 1rem auto; display: block; cursor: zoom-in; } .img-caption { margin-top: 0.5rem; font-size: 0.9rem; opacity: 0.9; } .thumbnail-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-top: 1.5rem; } .thumb-item { position: relative; height: 100px; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: var(--transition); cursor: zoom-in; } .thumb-item:hover { transform: scale(1.08); box-shadow: 0 6px 16px rgba(0,0,0,0.3); } .thumb-item img { width: 100%; height: 100%; object-fit: cover; } .clear-btn { background: #aaa !important; margin-top: 1rem !important; font-size: 0.9rem !important; } .clear-btn:hover { background: #888 !important; } footer { text-align: center; padding: 1.5rem; margin-top: 3rem; color: rgba(255,255,255,0.6); font-size: 0.9rem; } /* === 全屏图片预览模态框样式 === */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.9); z-index: 1000; justify-content: center; align-items: center; flex-direction: column; animation: fadeIn 0.3s ease; } .modal.active { display: flex; } .modal-content { max-width: 90vw; max-height: 80vh; border-radius: 10px; box-shadow: 0 0 30px rgba(255, 255, 255, 0.2); overflow: hidden; position: relative; } .modal-content img { max-width: 100%; max-height: 80vh; display: block; } .modal-caption { margin-top: 1rem; font-size: 1rem; color: white; text-align: center; max-width: 90vw; } .close-modal { position: absolute; top: 15px; right: 20px; font-size: 2rem; color: white; background: none; border: none; cursor: pointer; opacity: 0.8; } .close-modal:hover { opacity: 1; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 768px) { main { flex-direction: column; padding: 0.5rem; } .container { padding: 1.5rem; } h1 { font-size: 1.8rem; } } </style> </head> <body> <!-- 头部导航 --> <header> <h1>🎨 AI 图片生成器</h1> <nav> <a href="index.html">首页</a> <a href="guide.html">使用说明</a> </nav> </header> <main> <!-- 左侧输入区 --> <section class="input-section"> <div class="container"> <h2>描述你的创意</h2> <p class="example">例如:一只穿宇航服的猫在火星上钓鱼,赛博朋克风格</p> <label for="prompt">文字提示 (Prompt)</label> <input type="text" id="prompt" placeholder="输入你想要的画面描述..." /> <label for="style">艺术风格</label> <select id="style"> <option value="">无特定风格</option> <option value="anime">动漫风格</option> <option value="realistic">写实风格</option> <option value="oil painting">油画风格</option> <option value="cyberpunk">赛博朋克</option> <option value="watercolor">水彩画</option> <option value="surrealism">超现实主义</option> </select> <button onclick="generateImage()">✨ 生成图片</button> <div id="result"> <!-- 生成结果将显示在这里 --> </div> </div> </section> <!-- 右侧图库区 --> <section class="gallery-section"> <div class="container"> <h2>🖼️ 生成历史</h2> <p class="example">点击缩略图可查看大图</p> <div class="thumbnail-wall" id="history"></div> <button class="clear-btn" onclick="clearHistory()">🗑️ 清除历史</button> </div> </section> </main> <footer> © 2025 AI Image Generator Tool | 使用 Unsplash 模拟数据 | 学习演示用途 </footer> <!-- === 全屏图片预览模态框 === --> <div id="imageModal" class="modal"> <button class="close-modal" onclick="closeModal()">×</button> <div class="modal-content"> <img id="modalImage" src="" alt="Preview"> </div> <div class="modal-caption" id="modalCaption"></div> </div> <script> // 历史记录存储 let history = JSON.parse(localStorage.getItem('aiImageHistory')) || []; // 获取模态框元素 const modal = document.getElementById("imageModal"); const modalImg = document.getElementById("modalImage"); const modalCaption = document.getElementById("modalCaption"); // 打开模态框函数 function viewImage(src, caption) { modalImg.src = src; modalCaption.textContent = caption || ""; modal.classList.add("active"); document.body.style.overflow = "hidden"; // 防止滚动 } // 关闭模态框 function closeModal() { modal.classList.remove("active"); document.body.style.overflow = ""; // 恢复滚动 } // 点击遮罩外部关闭 modal.onclick = function(e) { if (e.target === modal) { closeModal(); } }; // 支持 ESC 键关闭(可选) document.onkeydown = function(e) { if (e.key === "Escape" && modal.classList.contains("active")) { closeModal(); } }; // 更新历史记录到页面 function updateHistory() { const historyContainer = document.getElementById('history'); historyContainer.innerHTML = ''; if (history.length === 0) { historyContainer.innerHTML = '<p style="opacity:0.6; font-size:0.9rem;">暂无历史记录</p>'; return; } // 显示最新的6条 const recent = history.slice(-6).reverse(); recent.forEach(item => { const div = document.createElement('div'); div.className = 'thumb-item'; div.onclick = () => viewImage(item.imageUrl, `Prompt: ${item.prompt} | 风格: ${item.style}`); div.innerHTML = ` <img src="${item.imageUrl}" alt="history" onerror="this.onerror=null;this.src='https://via.placeholder.com/120x100?text=Error';"> `; historyContainer.appendChild(div); }); } // 从历史中点击查看详情(也支持大图) function showFromHistory(item) { document.getElementById('result').innerHTML = ` <h3>历史记录</h3> <img src="${item.imageUrl}" alt="Historical Image" onclick="viewImage('${item.imageUrl}', 'Prompt: ${item.prompt} | 风格: ${item.style}')"> <p class="img-caption"><strong>Prompt:</strong> ${item.prompt}</p> ${item.style ? `<p class="img-caption"><strong>风格:</strong> ${item.style}</p>` : ''} `; window.scrollTo({ top: 0, behavior: 'smooth' }); } // 清除所有历史 function clearHistory() { if (confirm("确定要清除所有生成的历史记录吗?")) { localStorage.removeItem('aiImageHistory'); history = []; updateHistory(); alert("历史记录已清除!"); } } // 图片模拟池(可按风格分类) const imagePool = { default: ['abstract', 'art', 'creative'], anime: ['anime', 'manga', 'cartoon'], realistic: ['realistic', 'photo', 'highly detailed'], 'oil painting': ['oil painting', 'brush strokes', 'classic art'], cyberpunk: ['cyberpunk', 'neon', 'futuristic'], watercolor: ['watercolor', 'painting', 'soft colors'], surrealism: ['surreal', 'dreamlike', 'melting'] }; function getRandomImageUrl(prompt, style) { const tags = imagePool[style] || imagePool.default; const tag = tags[Math.floor(Math.random() * tags.length)]; return `https://source.unsplash.com/random/800x600/?${encodeURIComponent(tag)}`; } // 生成图片主函数 function generateImage() { const promptInput = document.getElementById("prompt").value.trim(); const styleSelect = document.getElementById("style").value; const resultDiv = document.getElementById("result"); if (!promptInput) { alert("请输入你的创意描述!"); return; } resultDiv.className = "loading"; resultDiv.innerHTML = "<p>🧠 正在通过 AI 创作中,请稍候...</p>"; // 模拟网络请求延迟 setTimeout(() => { const imageUrl = getRandomImageUrl(promptInput, styleSelect); const displayStyle = document.getElementById("style").options[document.getElementById("style").selectedIndex].text; resultDiv.className = ""; resultDiv.innerHTML = ` <h3>✅ 生成成功!</h3> <img src="${imageUrl}" alt="AI Generated" onclick="viewImage('${imageUrl}', 'Prompt: ${promptInput} | 风格: ${displayStyle}')" onerror="this.src='https://via.placeholder.com/800x600?text=生成失败';"> <p class="img-caption"><strong>Prompt:</strong> ${promptInput}</p> ${styleSelect ? `<p class="img-caption"><strong>风格:</strong> ${displayStyle}</p>` : ''} `; // 添加到历史 const record = { prompt: promptInput, style: displayStyle, imageUrl, timestamp: new Date().toLocaleString() }; history.push(record); localStorage.setItem('aiImageHistory', JSON.stringify(history)); updateHistory(); // 刷新缩略图墙 }, 1800); } // 页面加载时初始化历史记录 window.onload = function () { updateHistory(); }; </script> </body> </html> 添加更多功能,我需要完整代码
11-07
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值