Проход по пикселям изображения

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

Для  замены определенного цвета другим, необходимо использовать проход только один раз, то есть задействовать только один цикл, а не множество, так как нет необходимости выделять изображение.

 

C#

//функция паузы
 
void pause() {
Thread.Sleep(50);
}
 
//проход по верхнему краю
 
for (int x = 0; x < bmp.Width; x++)
{
 
for (int y = 0; y < bmp.Height; y++)
{
 
&nbsp;
 
bmp.SetPixel(x, y, Color.Red);
pictureBox1.Image = bmp;
await Task.Run(() => pause());
 
}
}
 
//проход по правому краю
 
for (int y = 0; y < bmp.Height; y++)
{
 
for (int x = bmp.Width-1; x > -1; x--)
{
 
&nbsp;
 
bmp.SetPixel(x, y, Color.Green);
pictureBox1.Image = bmp;
await Task.Run(() => pause());
 
}
}
 
//проход по нижнему краю
for (int x = bmp.Width-1; x >-1 ; x--)
{
 
for (int y = bmp.Height-1; y >-1; y--)
{
 
&nbsp;
 
bmp.SetPixel(x, y, Color.Blue);
pictureBox1.Image = bmp;
await Task.Run(() => pause());
 
}
}
 
//проход по левому краю
for (int y = bmp.Height-1; y > -1 ; y--)
{
 
for (int x = 0; x < bmp.Width; x++)
{
 
&nbsp;
 
bmp.SetPixel(x, y, Color.Pink);
pictureBox1.Image = bmp;
await Task.Run(() => pause());
 
}
}

 

JS

Здесь, исходное изображение — красный квадрат, размером 50 на 50 пикселей.Всё рисуется на элементе canvas, который потом можно сохранить в изображение.

<canvas id="canvas1_id" width="50" height="50">
</canvas>
<script>
var img = new Image;
img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsEAAA7BAbiRa+0AAABQSURBVFhH7c6hAcAwDMCwrP//vJEdULMAiZj6eWej83cZW4WtwlZhq7BV2CpsFbYKW4WtwlZhq7BV2CpsFbYKW4WtwlZhq7BV2CpsFbbuzXxBqgFjroM6NwAAAABJRU5ErkJggg==" ;
var canvas1 = document.getElementById("canvas1_id");
var context = canvas1.getContext('2d');
 
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
 
window.onload = async function(){
 
context.drawImage(img,0,0, 50, 50);
 
//проход по верхнему краю
//выбрать цвет(создать пиксель)
var imgData = context.createImageData(1, 1);
for (var i = 0; i < imgData.data.length; i += 4) {
imgData.data[i+0] = 0;
imgData.data[i+1] = 0;
imgData.data[i+2] = 255;
imgData.data[i+3] = 255;
}
 
for (var x = 0; x < img.width; x++)
{
 
for (var y = 0; y < img.height; y++)
{
 
context.putImageData(imgData, x, y);
 
await sleep(1);
 
}
}//for i
 
//проход по правому краю
//imgData = context.createImageData(1, 1);
for (var i = 0; i < imgData.data.length; i += 4) {
imgData.data[i+0] = 255;
imgData.data[i+1] = 0;
imgData.data[i+2] = 255;
imgData.data[i+3] = 255;
}
 
for (var y = 0; y < img.height; y++)
{
 
for (var x = img.width-1; x > -1; x--)
{
 
context.putImageData(imgData, x, y);
 
await sleep(1);
 
}
}
 
//проход по нижнему краю
//imgData = context.createImageData(1, 1);
for (var i = 0; i < imgData.data.length; i += 4) {
imgData.data[i+0] = 255;
imgData.data[i+1] = 255;
imgData.data[i+2] = 0;
imgData.data[i+3] = 255;
}
 
for (var x = img.width-1; x >-1 ; x--)
{
 
for (var y = img.height-1; y >-1; y--)
{
 
context.putImageData(imgData, x, y);
 
await sleep(1);
 
}
}
 
//проход по левому краю, так как по умолчанию проход идет слева направо
//поэтому используется такой метод
var imageData = context.getImageData(0, 0, 50, 50);
var data = imageData.data;
 
for (var i = 0; i < data.length; i +=4 ) {
 
data[i] = 0; // r
data[i + 1] = 128; // g
data[i + 2] = 0; // b
 
context.putImageData(imageData, 0, 0);
await sleep(1);
}
 
}

 

Живой пример:

 

ОЦЕНИТЕ ДАННУЮ ПУБЛИКАЦИЮ:

Средний рейтинг / 5. Количество оценок:

Мы сожалеем, что эта публикация Вас не устроила.

Сохранить в:

Оставить комментарий

avatar
  Подписаться  
Уведомление о