Ответы Mail
Программирование
Android
C/C++
C#
iOS
Java
JavaScript
jQuery
SQL
Perl
PHP
Python
Веб-дизайн
Верстка, CSS, HTML, SVG
Системное администрирование
Другие языки и технологии
Лидеры категории
Лена-пена
М.И.
Y.Nine
•••
Искусственный Интеллект
Искусственный Интеллект
Искусственный Интеллект
Помогите разобраться новичку в JavaScript где ошибки в коде.
ПТИЦА ГОВОРУН...
(9019),
на голосовании
2 месяца назад
Дополнен 3 месяца назад
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Image Manipulation</title>
<style>
canvas {
border: 1px solid black;
margin: 10px;
}
#controls {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="controls">
<input type="text" id="imageUrl" placeholder="Введите URL изображения" />
<input type="number" id="radius" placeholder="Радиус захвата" value="5" />
<button id="loadImage">Загрузить изображение</button>
</div>
<canvas id="frontCanvas" width="300" height="300"></canvas>
<canvas id="sideCanvas" width="300" height="300"></canvas>
<canvas id="topCanvas" width="300" height="300"></canvas>
<script>
const frontCanvas = document.getElementById('frontCanvas');
const sideCanvas = document.getElementById('sideCanvas');
const topCanvas = document.getElementById('topCanvas');
const ctxFront = frontCanvas.getContext('2d');
const ctxSide = sideCanvas.getContext('2d');
const ctxTop = topCanvas.getContext('2d');
let imageDataArray = [];
let imageLoaded = false;
document.getElementById('loadImage').addEventListener('click', () => {
const url = document.getElementById('imageUrl').value;
loadImage(url);
});
function loadImage(url) {
const img = new Image();
img.crossOrigin = "Anonymous"; // Для загрузки изображений с других доменов
img.onload = () => {
initialize3DArray(img);
drawCanvases();
imageLoaded = true;
};
img.src = url;
}
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Image Manipulation</title>
<style>
canvas {
border: 1px solid black;
margin: 10px;
}
#controls {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="controls">
<input type="text" id="imageUrl" placeholder="Введите URL изображения" />
<input type="number" id="radius" placeholder="Радиус захвата" value="5" />
<button id="loadImage">Загрузить изображение</button>
</div>
<canvas id="frontCanvas" width="300" height="300"></canvas>
<canvas id="sideCanvas" width="300" height="300"></canvas>
<canvas id="topCanvas" width="300" height="300"></canvas>
<script>
const frontCanvas = document.getElementById('frontCanvas');
const sideCanvas = document.getElementById('sideCanvas');
const topCanvas = document.getElementById('topCanvas');
const ctxFront = frontCanvas.getContext('2d');
const ctxSide = sideCanvas.getContext('2d');
const ctxTop = topCanvas.getContext('2d');
let imageDataArray = [];
let imageLoaded = false;
document.getElementById('loadImage').addEventListener('click', () => {
const url = document.getElementById('imageUrl').value;
loadImage(url);
});
function loadImage(url) {
const img = new Image();
img.crossOrigin = "Anonymous"; // Для загрузки изображений с других доменов
img.onload = () => {
initialize3DArray(img);
drawCanvases();
imageLoaded = true;
};
img.src = url;
}
Дополнен 3 месяца назад
function initialize3DArray(img) {
const width = img.width;
const height = img.height;
imageDataArray = new Array(height).fill(0).map(() =>
new Array(width).fill(0).map(() =>
new Array(3).fill(0)
)
);
const tempCanvas = document.createElement('canvas');
tempCanvas.width = width;
tempCanvas.height = height;
const tempCtx = tempCanvas.getContext('2d');
tempCtx.drawImage(img, 0, 0);
const imageData = tempCtx.getImageData(0, 0, width, height);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const index = (y * width + x) * 4;
imageDataArray[y][x] = [
imageData.data[index], // R
imageData.data[index + 1], // G
imageData.data[index + 2] // B
];
}
}
}
function drawCanvases() {
if (!imageLoaded) return;
// Рисуем фронтальный вид
drawFrontView();
// Рисуем боковой вид
drawSideView();
// Рисуем вид сверху
drawTopView();
}
function drawFrontView() {
for (let y = 0; y < imageDataArray.length; y++) {
for (let x = 0; x < imageDataArray[y].length; x++) {
const [r, g, b] = imageDataArray[y][x];
ctxFront.fillStyle = rgb(${r},${g},${b});
ctxFront.fillRect(x, y, 1, 1);
}
}
}
const width = img.width;
const height = img.height;
imageDataArray = new Array(height).fill(0).map(() =>
new Array(width).fill(0).map(() =>
new Array(3).fill(0)
)
);
const tempCanvas = document.createElement('canvas');
tempCanvas.width = width;
tempCanvas.height = height;
const tempCtx = tempCanvas.getContext('2d');
tempCtx.drawImage(img, 0, 0);
const imageData = tempCtx.getImageData(0, 0, width, height);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const index = (y * width + x) * 4;
imageDataArray[y][x] = [
imageData.data[index], // R
imageData.data[index + 1], // G
imageData.data[index + 2] // B
];
}
}
}
function drawCanvases() {
if (!imageLoaded) return;
// Рисуем фронтальный вид
drawFrontView();
// Рисуем боковой вид
drawSideView();
// Рисуем вид сверху
drawTopView();
}
function drawFrontView() {
for (let y = 0; y < imageDataArray.length; y++) {
for (let x = 0; x < imageDataArray[y].length; x++) {
const [r, g, b] = imageDataArray[y][x];
ctxFront.fillStyle = rgb(${r},${g},${b});
ctxFront.fillRect(x, y, 1, 1);
}
}
}
Дополнен 3 месяца назад
function drawSideView() {
for (let y = 0; y < imageDataArray.length; y++) {
for (let x = 0; x < imageDataArray[y].length; x++) {
const [r, g, b] = imageDataArray[y][x];
ctxSide.fillStyle = rgb(${r},${g},${b});
ctxSide.fillRect(y, x, 1, 1); // Поворачиваем изображение
}
}
}
function drawTopView() {
for (let y = 0; y < imageDataArray.length; y++) {
for (let y = 0; y < imageDataArray.length; y++) {
for (let x = 0; x < imageDataArray[y].length; x++) {
const [r, g, b] = imageDataArray[y][x];
ctxSide.fillStyle = rgb(${r},${g},${b});
ctxSide.fillRect(y, x, 1, 1); // Поворачиваем изображение
}
}
}
function drawTopView() {
for (let y = 0; y < imageDataArray.length; y++) {
Дополнен 3 месяца назад
for (let x = 0; x < imageDataArray[y].length; x++) {
const [r, g, b] = imageDataArray[y][x];
ctxTop.fillStyle = rgb(${r},${g},${b});
ctxTop.fillRect(x, height - y - 1, 1, 1); // Инвертируем Y для верха
}
}
}
frontCanvas.addEventListener('mousedown', (event) => {
if (!imageLoaded) return;
const radius = parseInt(document.getElementById('radius').value);
const rect = frontCanvas.getBoundingClientRect();
const x = Math.floor(event.clientX - rect.left);
const y = Math.floor(event.clientY - rect.top);
manipulateImage(x, y, radius);
drawCanvases();
});
function manipulateImage(x, y, radius) {
for (let dy = -radius; dy <= radius; dy++) {
for (let dx = -radius; dx <= radius; dx++) {
const nx = x + dx;
const ny = y + dy;
if (nx >= 0 && nx < imageDataArray[0].length && ny >= 0 && ny < imageDataArray.length) {
// Пример смещения: просто изменим цвет на случайный
imageDataArray[ny][nx] = [
Math.random() * 255,
Math.random() * 255,
Math.random() * 255
];
}
}
}
}
</script>
</body>
</html>
const [r, g, b] = imageDataArray[y][x];
ctxTop.fillStyle = rgb(${r},${g},${b});
ctxTop.fillRect(x, height - y - 1, 1, 1); // Инвертируем Y для верха
}
}
}
frontCanvas.addEventListener('mousedown', (event) => {
if (!imageLoaded) return;
const radius = parseInt(document.getElementById('radius').value);
const rect = frontCanvas.getBoundingClientRect();
const x = Math.floor(event.clientX - rect.left);
const y = Math.floor(event.clientY - rect.top);
manipulateImage(x, y, radius);
drawCanvases();
});
function manipulateImage(x, y, radius) {
for (let dy = -radius; dy <= radius; dy++) {
for (let dx = -radius; dx <= radius; dx++) {
const nx = x + dx;
const ny = y + dy;
if (nx >= 0 && nx < imageDataArray[0].length && ny >= 0 && ny < imageDataArray.length) {
// Пример смещения: просто изменим цвет на случайный
imageDataArray[ny][nx] = [
Math.random() * 255,
Math.random() * 255,
Math.random() * 255
];
}
}
}
}
</script>
</body>
</html>
Дополнен 3 месяца назад
https://notelist.ru/?note=1bd7ff0f-f79e-60b5-da6a-478e7b906a70
Дополнен 3 месяца назад
Это пока что макет программы, дальше я планировал сделать вместо 3 видов, лучше вывод в канвас через две стерео камеры, с настройкой обзора и схождения между ними.
Дополнен 3 месяца назад
Голосование за лучший ответ
Андрей Борисов
(476)
3 месяца назад
не помогу отстань
ПТИЦА ГОВОРУН...Мыслитель (9019)
3 месяца назад
)Андрюха, хрен тебе в ухо
Андрей Борисов
Знаток
(476)
ПТИЦА ГОВОРУН..., зашо
ПТИЦА ГОВОРУН...Мыслитель (9019)
3 месяца назад
Я на самом деле не понимаю зачем все эти webGL, если существует более простой подход к выводу 3D графики.
AaacoB Aaac
(11912)
3 месяца назад
предлагает нам с ии разбираться, совсем и6анутый!
ПТИЦА ГОВОРУН...Мыслитель (9019)
3 месяца назад
Не, с ним и сами разработчики то не разобрались ещë.
Петр Алексеевич
(82088)
3 месяца назад
В чем вопрос твой состоит, непонятно, только простыни неотформатированного кода
ПТИЦА ГОВОРУН...Мыслитель (9019)
3 месяца назад
В том что он не работает.
Петр Алексеевич
Оракул
(82088)
ПТИЦА ГОВОРУН..., ну вот так нейросети и ответь
Похожие вопросы
Код на JavaScript, загрузить изображение с URL в самый первый слой 3d массив array rgb, и потом вывести изображение в три штуки canvas так, чтобы получились виды: спереди, сбоку, сверху.
Нажатием левой кнопки компьютерной мыши на ту область изображение, где наведëн курсор этой мыши смещать с захватом скольких то пикселей вдаль по слоям массива, а также, по нажатию мыши должно происходить обновление вывода изображений в 3 canvas.
В интерфейсе html должно быть 3 canvas, настройка радиуса захвата пикселей вокруг курсора, и область ввода адреса URL.
Смысл такой программы в том, что мне нужно загруженное изображение с URL адреса самостоятельно изгибать в 3D массиве, используя для этого компьютерную мышь и настройку захвата пикселей вокруг курсора.
Например, готовую текстуру для 3D объекта.
https://notelist.ru/?u=8c05d436-54c0-46ab-a043-50167b5d2bf3