Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.75/8: Рейтинг темы: голосов - 8, средняя оценка - 4.75
0 / 0 / 0
Регистрация: 26.12.2018
Сообщений: 30
1

Обработка изображения

12.01.2021, 10:07. Просмотров 1489. Ответов 6

Доброго времени суток, есть "программа" для обработки изображения, одна из функций которой - наложение шума, но вместе с эти изображение также преобразуется в негатив, в чём может быть проблема?

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function setNoise(noiseMul) {
    drawByPosition(currentPositionInHistory);
 
    let imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < imgPixels.data.length; i += 4) {
        let v = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
        imgPixels.data[i] = v >= 127 ? 0 : 255;
        imgPixels.data[i + 1] = v >= 127 ? 0 : 255;
        imgPixels.data[i + 2] = v >= 127 ? 0 : 255;
    }
 
    for (let i = 0; i < imgPixels.data.length; i += 4) {
        let isBlack = imgPixels.data[i] == 0 ? true : false;
        let rand = Math.random();
 
        imgPixels.data[i] = isBlack ? (rand >= noiseMul ? 0 : 255) : (rand >= noiseMul ? 255 : 0);
        imgPixels.data[i + 1] = isBlack ? (rand >= noiseMul ? 0 : 255) : (rand >= noiseMul ? 255 : 0);
        imgPixels.data[i + 2] = isBlack ? (rand >= noiseMul ? 0 : 255) : (rand >= noiseMul ? 255 : 0);
    }
 
    ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
}
Вот функция, за это отвечающая и файл с "программой", если надо (запуск через html)
0
Вложения
Тип файла: rar oi.rar (191.7 Кб, 3 просмотров)
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
12.01.2021, 10:07
Ответы с готовыми решениями:

Загрузка изображения на сайт для манипуляций без сохранения данного изображения в бд или хостинге
Можно ли с помощью JS загрузить изображение на сайт для манипуляций, без сохранения данного...

Обработка события Click, вставка html после генерации и обработка этого кода
Подскажите пожалуйста как заставить работать эту часть кода 18 строка ...

Обработка изображения
Ребята! Прошу не проходите мимо, помогите с заданием:

Обработка изображения
Всем привет, пишу приложение, которое должно считывать картинку, преобразовывать ее и сохранять в...

6
1675 / 951 / 414
Регистрация: 12.05.2016
Сообщений: 2,425
12.01.2021, 12:12 2
Лучший ответ Сообщение было отмечено Riyzaky как решение

Решение

Riyzaky, Вам какой шум нужен? Случайный можно так сделать
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
function setNoise(noiseMul) {
    drawByPosition(currentPositionInHistory);
    let imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
    for (let i = 0; i < imgPixels.data.length; i += 4) {
        if (Math.random() < noiseMul) {
            imgPixels.data[i] = Math.floor(Math.random()*256);
            imgPixels.data[i + 1] = Math.floor(Math.random()*256);
            imgPixels.data[i + 2] = Math.floor(Math.random()*256);
        }
 
    }
    ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
}
1
0 / 0 / 0
Регистрация: 26.12.2018
Сообщений: 30
12.01.2021, 12:32  [ТС] 3
Выглядит как правда, спасибо большое) Извините за наглость, но как тут ещё можно реализовать, чтобы рядом с редактируемым изображением висело исходное, подскажите, пожалуйста, если это не сильно тяжело.
0
1675 / 951 / 414
Регистрация: 12.05.2016
Сообщений: 2,425
12.01.2021, 12:46 4
Riyzaky, в js
Javascript
1
2
3
4
5
6
const canvas2 = document.getElementById('canvas2');
const ctx2 = canvas2.getContext('2d');
// в метод loadImage добавить аналогично canvas
canvas2.width = img.width;
canvas2.height = img.height;
ctx2.drawImage(img, 0, 0);
в html
HTML5
1
<canvas id="canvas2"></canvas>
ну и css-ом расположите как нужно.
1
0 / 0 / 0
Регистрация: 26.12.2018
Сообщений: 30
12.01.2021, 13:20  [ТС] 5
Не очень понятно, не смотря на объяснение, как добавить в метод loadImage canvas2, уже тремя способами попробовал, либо не открывается картинка вообще, либо только одна, не могли бы в подробнее описать, пожалуйста

Добавлено через 8 минут
Javascript
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
function loadImage(e) {
    let reader = new FileReader();
    reader.onload = function (event) {
        let img = new Image();
        img.onload = function () {
            canvas.width = img.width;
            canvas.height = img.height;
            resolution = {
                'width': img.width,
                'height': img.height
            }
            ctx.drawImage(img, 0, 0);
        }
        
        img.src = event.target.result;
        tempImage.src = event.target.result;
        originalImage.src = event.target.result;
        clearVariables();
        historyPush(event.target.result);
    }
    name = e.target.files[0].name;
    size = e.target.files[0].size;
    type = e.target.files[0].type.substr(e.target.files[0].type.lastIndexOf('/') + 1);
    reader.readAsDataURL(e.target.files[0]);
}
Для удобства.
0
1675 / 951 / 414
Регистрация: 12.05.2016
Сообщений: 2,425
12.01.2021, 13:23 6
Riyzaky,
Javascript
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
function loadImage(e) {
    let reader = new FileReader();
    reader.onload = function (event) {
        let img = new Image();
        img.onload = function () {
            canvas.width = img.width;
            canvas.height = img.height;
 
            canvas2.width = img.width;
            canvas2.height = img.height;
 
            resolution = {
                'width': img.width,
                'height': img.height
            }
            ctx.drawImage(img, 0, 0);
            ctx2.drawImage(img, 0, 0);
        }
        
        img.src = event.target.result;
        tempImage.src = event.target.result;
        originalImage.src = event.target.result;
        clearVariables();
        historyPush(event.target.result);
    }
    name = e.target.files[0].name;
    size = e.target.files[0].size;
    type = e.target.files[0].type.substr(e.target.files[0].type.lastIndexOf('/') + 1);
    reader.readAsDataURL(e.target.files[0]);
}
1
0 / 0 / 0
Регистрация: 26.12.2018
Сообщений: 30
12.01.2021, 13:33  [ТС] 7
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="canvas-container">
              <div class="canvas-holder">
                  <div class="toggle-image pt-2 pl-2">
                      <button id="" class="btn btn-lg btn-toggle visibility-hist">
                          <i class="fa fa-bar-chart" aria-hidden="true"></i>
                      </button>
                  </div>
                  <div class="start-original-image">
                      <button id="get-current-image" class="btn btn-lg btn-toggle-1" title="Текущее изображение">
                          <i class="fas fa-image"></i>
                      </button>
                      <button id="get-original-image" class="btn btn-lg btn-toggle-2" title="Оригинал">
                          <i class="fa fa-history"></i>
                      </button>
                  </div>
                  <div class="coord-bar">
                      <div class="coord-bar__numbers"></div>
                  </div>
                  <canvas id="canvas"></canvas>
                  <canvas id="canvas2"></canvas>
Я же правильно понимаю, что в html <canvas id="canvas2"></canvas> вставляется просто последней строкой? Оно всё равно выдаёт только одну картинку Извините за беспокойство, только осваиваюсь...
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
12.01.2021, 13:33

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Обработка изображения
Имеется в Paint.Net и в фотошопе такая функция (в Paint.Net называется &quot;Волшебная палочка&quot;) -...

Обработка изображения
Нужен пример использования функции на C# InRangeS(inf, sup, image) из библиотеки OpenCV...

Обработка изображения
Подскажите какие-нибудь идеи, пожалуйста. Необходимо изображение представить в виде спирали,...

Обработка изображения
Как можно уменьшить глубину цвета? и разрешение? Добавлено через 4 часа 13 минут С разрешением...

Обработка изображения
Здравствуйте! 1.Необходимо загрузить сине-белое изображение 2.Перевести его в бинарный вид...

Обработка изображения
Здравствуйте! Хочется узнать, как можно получить значения пикселей изображения (в градациях...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.