Пиксельная манипуляция с холстом

@asjl · Регистрация: 02.05.2021

Студворк — интернет-сервис помощи студентам

Всем привет,
мне необходимо запрограммировать экранный фильтр с переменным размером экрана. Этот переменный размер экрана должен регулировать с помощью ползунка (range).
Что я сделал не так?
Заранее спасибо!

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
   <script type="text/javascript">
    window.addEventListener('load', canvasApp, false);
 
    function canvasApp() {
      if (!document.createElement('canvas').getContext) {
        return;
      }
 
 
      //Event Listener für Änderungen der Rastergröße
      document.getElementById("sizeInput").addEventListener("change", onSizeChange);
 
      var theCanvas = document.getElementById('canvas');
      var context = theCanvas.getContext('2d');
 
      var image = new Image();
      image.addEventListener('load', onImageLoaded);
      image.src = 'bild.jpg';
 
      var imgWidth;
      var imgHeight;
 
      function onImageLoaded(e) {
        imgWidth = image.width;
        imgHeight = image.height;
        drawCanvas();
      }
 
 
      function drawCanvas() {
        context.drawImage(image, 0, 0);
 
        var imgData = context.getImageData(0, 0, imgWidth, imgHeight);
 
        var rasterSize = size;
       
        for (var x = 0; x < imgData.width; x++) {
          for (var y = 0; x < imgData.height; y++) {
 
            var rasterX = ((x / rasterSize | 0) * rasterSize);
            var rasterY = ((y / rasterSize | 0) * rasterSize);
 
            var rasterValIndex = (rasterX + rasterY * imgData.width) * 4;
 
 
            r = imgData.data[rasterValIndex]; 
            g = imgData.data[rasterValIndex + 1]; 
            b = imgData.data[rasterValIndex + 2]; 
            a = imgData.data[rasterValIndex + 3]; 
 
 
            imgData.data[rasterValIndex++] = 255;
            imgData.data[rasterValIndex++] = 0;
            imgData.data[rasterValIndex++] = 0;
            imgData.data[rasterValIndex] = 255;      
 
        }
 
        context.putImageData(imgData, 0, 0);
      }
 
      function onSizeChange(e) {
        size = e.target.value;
        drawCanvas();
      }
    }
 
  </script>
  </head>
<body>
<div style="position: absolute; top: 0; left: 0;">
  <canvas id="canvas" width="615" height="410" >
    Your browser does not support the HTML 5 Canvas.
  </canvas>
 
  <form>
    <input type="range" id="sizeInput" min="2" max="100" step="1" value="100">
  </form>
</div>
</body>
</html>

@D_Vik · 05.10.2021, 19:51

Можно немного побольше инфо ? Вам нужно изменять размер самого канваса или отображаемого в нем элемента ?

@asjl · 06.10.2021, 11:24 **[ТС]**

Если честно, я и сам не совсем уверен, что понимаю задание правильно.
Range должен менять размер Raster.

В задании также есть Code snippet for ImageData Loop:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var rasterSize = 6;
       
        for (var x = 0; x < imgData.width; x++) {
          for (var y = 0; x < imgData.height; y++) {
 
            var rasterX = ((x / rasterSize | 0) * rasterSize);
            var rasterY = ((y / rasterSize | 0) * rasterSize);
 
            var rasterValIndex = (rasterX + rasterY * imgData.width) * 4;
 
 
            r = imgData.data[rasterValIndex]; 
            g = imgData.data[rasterValIndex + 1]; 
            b = imgData.data[rasterValIndex + 2]; 
            a = imgData.data[rasterValIndex + 3]; 
 
           // поместите пиксели в x, y
           //……
    }
}

Больше никакой информации в задании нет.....

@Balanaar · 06.10.2021, 12:10

asjl, опубликуйте текст задания дословно.

@asjl · 06.10.2021, 12:51 **[ТС]**

Дословно:
Запрограммируйте фильтр растеризации изображения с переменным размером растра. Этот размер сетки можно регулировать с помощью ползунка (range-элемент).

Фрагмент кода для ImageData Loop:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var rasterSize = 6;
       
        for (var x = 0; x < imgData.width; x++) {
          for (var y = 0; x < imgData.height; y++) {
 
            var rasterX = ((x / rasterSize | 0) * rasterSize);
            var rasterY = ((y / rasterSize | 0) * rasterSize);
 
            var rasterValIndex = (rasterX + rasterY * imgData.width) * 4;
 
 
            r = imgData.data[rasterValIndex]; 
            g = imgData.data[rasterValIndex + 1]; 
            b = imgData.data[rasterValIndex + 2]; 
            a = imgData.data[rasterValIndex + 3]; 
 
// поместите пиксели в x, y
//……
    }
}

@asjl · 06.10.2021, 19:34 **[ТС]**

Тема закрыта, ошибка найдена...

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@D_Vik 368 / 234 / 68 Регистрация: 19.07.2016 Сообщений: 833
	05.10.2021, 19:51
	Можно немного побольше инфо ? Вам нужно изменять размер самого канваса или отображаемого в нем элемента ? 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	06.10.2021, 12:10
	asjl, опубликуйте текст задания дословно. 0

@asjl 0 / 0 / 0 Регистрация: 02.05.2021 Сообщений: 8
	06.10.2021, 19:34 [ТС]
	Тема закрыта, ошибка найдена... 0