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

@Riyzaky · Регистрация: 26.12.2018

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

Javascript

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)

shvyrevvg · 12.01.2021, 12:12

Riyzaky, Вам какой шум нужен? Случайный можно так сделать

Javascript

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);
}

@Riyzaky · 12.01.2021, 12:32 **[ТС]**

Выглядит как правда, спасибо большое) Извините за наглость, но как тут ещё можно реализовать, чтобы рядом с редактируемым изображением висело исходное, подскажите, пожалуйста, если это не сильно тяжело.

shvyrevvg · 12.01.2021, 12:46

Riyzaky, в js

Javascript

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-ом расположите как нужно.

@Riyzaky · 12.01.2021, 13:20 **[ТС]**

Не очень понятно, не смотря на объяснение, как добавить в метод loadImage canvas2, уже тремя способами попробовал, либо не открывается картинка вообще, либо только одна, не могли бы в подробнее описать, пожалуйста

Добавлено через 8 минут

Javascript

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]);
}

Для удобства.

shvyrevvg · 12.01.2021, 13:23

Riyzaky,

Javascript

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]);
}

@Riyzaky · 12.01.2021, 13:33 **[ТС]**

HTML5

<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> вставляется просто последней строкой? Оно всё равно выдаёт только одну картинку

Извините за беспокойство, только осваиваюсь...

@Riyzaky 0 / 0 / 0 Регистрация: 26.12.2018 Сообщений: 30
	12.01.2021, 12:32 [ТС]	3
	Выглядит как правда, спасибо большое) Извините за наглость, но как тут ещё можно реализовать, чтобы рядом с редактируемым изображением висело исходное, подскажите, пожалуйста, если это не сильно тяжело. 0

Опции темы

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

Решение