Как перевести base64 в значение пикселей?

Question

vaselekk @vaselekk

JavaScript

Как перевести base64 в значение пикселей?

народ у меня есть код на filereader

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
    preview.src = reader.result;
 

  }


  if (file) {
    reader.readAsDataURL(file);
  } else {
    preview.src = "";
  }
}

который принимает картинку и отдает
такой формат:

"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ .........   8A/fyiiigD/9k="

Я бы хотел перевести в такой формат :
"100 344 123 000 424 ...." // чтоб был масив значений rgba всех пикселей, помогите пожалуйста как такое сделать на чистом js (без nodejs, и сanvas)

Вопрос задан более трёх лет назад
199 просмотров

26 комментариев

Подписаться 1 Простой 26 комментариев

Надим @zkrvndm

Зачем вам это нужно? Что вы планируйте делать с этим массивом?

Написано более трёх лет назад
vaselekk @vaselekk Автор вопроса

Надим Закиров,лично интересуюсь

Написано более трёх лет назад
Надим @zkrvndm

vaselekk, небось капчу какую хотите распознать?

Написано более трёх лет назад
Надим @zkrvndm

vaselekk, ладно, не отвечайте. Просто без Canvas это никак в лоб не сделать. Если же вам нужно просто отобразить загруженную картинку, то это делается не так.

Написано более трёх лет назад
vaselekk @vaselekk Автор вопроса

Надим Закиров, хотел на информатике программировать, там токо комп старый 32 бит, я хотел в браузере учительнице сделать программу на js, а функция канвас требует сервер

Написано более трёх лет назад
Надим @zkrvndm

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

Написано более трёх лет назад
vaselekk @vaselekk Автор вопроса

Надим Закиров,для получений пикселей нужно сервер , я уже проверял

Написано более трёх лет назад
Надим @zkrvndm

vaselekk, да ну?
https://developer.mozilla.org/ru/docs/Web/API/Canv...

Объект ImageData представляет базовые пиксельные данные области объекта холста. Он содержит следующие атрибуты только для чтения:
width - Ширина изображения в пикселях.
height - Высота изображения в пикселях.
data - представляет собой одномерный массив, содержащий данные в порядке RGBA, с целыми значениями от 0 до 255 (в комплекте).

Написано более трёх лет назад
vaselekk @vaselekk Автор вопроса

Надим Закиров, у меня ошибка Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.

Написано более трёх лет назад
vaselekk @vaselekk Автор вопроса

Надим Закиров, так что неработает хром ругаеться

Написано более трёх лет назад
Надим @zkrvndm

vaselekk, вы пытайтесь скормить картинку с нулевой шириной, конечно же у вас ошибка.

Написано более трёх лет назад

vaselekk @vaselekk Автор вопроса

Надим Закиров,

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<style>
		#color {
			background: red;
		}


	</style>
	<title>
		
	</title>
</head>
<body>


<canvas id="canvas"></canvas>
<div id="color">цвет</div>

<div id="object" style="display: flex;">[<div id="results"></div>]</div>

<script type="text/javascript">





var mass_color = [];




	var img = new Image();
img.src = '2.png';
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 1000;
canvas.height = 1000
img.onload = function() {
  ctx.drawImage(img, 0, 0, 1000, 1000);
  img.style.display = 'none';
};
var color = document.getElementById('color');
function pick(event) {
  var x = event.layerX;
  var y = event.layerY;
  var pixel = ctx.getImageData(x, y, 1, 1, 1000, 1000);
  var data = pixel.data;
  var rgba = 'rgba(' + data[0] + ', ' + data[1] +
             ', ' + data[2] + ', ' + (data[3] / 255) + ')';




  color.style.background =  rgba;
  color.textContent = rgba;

results.innerHTML += `"${data[0]}${data[1]}${data[2]}${data[3] / 255}",`


}
canvas.addEventListener('mousemove', pick);





</script>
</body>
</html>

если знаете так попробуйте и убедитесь что хром ругаеться, просто вставьте место 2.png вашу картинку

Написано более трёх лет назад

Надим @zkrvndm

vaselekk, мне не нужен твой код. Просто прими как факт, что ты делаешь что-то не так.

Допустим у тебя на странице есть тег img с изображением. Получить цвет определенного пикселя можно вот так:

// Берём любое изображение:
var img = document.querySelector('img');

// Создаём <canvas> того же размера:
var canvas = document.createElement('canvas');
canvas.width = img.clientWidth;
canvas.height = img.clientHeight;

var context = canvas.getContext('2d');

// Копируем изображение в  canvas:
context.drawImage(img, 0, 0);

// Вытаскиваем цвет нужного пикселя:
var data = context.getImageData(x, y, 1, 1).data;
var rgba = 'rgba(' + data[0] + ', ' + data[1] +', ' + data[2] + ', ' + (data[3] / 255) + ')';

console.dir(rgba);

Только замени x и y на координаты нужного пикселя.

Написано более трёх лет назад

vaselekk @vaselekk Автор вопроса

Надим Закиров, ваш код постоянно показует 0,0,0,0 картинку я вставил, и значение x,y выставил

Написано более трёх лет назад
vaselekk @vaselekk Автор вопроса

Надим Закиров, проверьте и убедитесь что ваш код постоянно показует 0

Написано более трёх лет назад
vaselekk @vaselekk Автор вопроса

vaselekk, Я попробовал в ваш код добавить window.onload и наступил на туже ошибку что ругался хром, если неверите попробуйте сами, Я попытался запустить файл с разных браузеров и все безуспешно

Написано более трёх лет назад
Надим @zkrvndm

vaselekk, вы пытайтесь скормить кривую картинку, из-за этого ошибка у вас вероятно.

Написано более трёх лет назад
WbICHA @WblCHA
Надим Закиров, не надо пудрить мозги людям. vaselekk всё верно пишет, там есть и будет ошибка, из-за секюрити фич.
Пожалуйста, гугли:
javascript canvas context getimagedata The operation is insecure

Там, вроде, есть решения.
Написано более трёх лет назад
Надим @zkrvndm

WbICHA, но ведь автор вопроса грузит изображение с поля, а не откуда с чужого домена. С чего бы ошибкам то быть?

Написано более трёх лет назад

Надим @zkrvndm

WbICHA, короче, не поленился, сделал демо. Все у меня работает. Пробуй если не веришь:

spoiler

<!doctype html>
<html lang="ru">
<head>
	<meta charset="utf-8" />
	<title>Пример</title>
	
	<style>
		
		body {
			margin: 0;
			font-family: 'Verdana';
			font-size: 18px;
			line-height: 1.5;
			text-align: center;
			color: #000000;
		}
		
		.table {
			display: table;
			width: 100%;
			height: 100vh;
		}
		
		.cell {
			display: table-cell;
			vertical-align: middle;
			padding: 50px;
		}
		
		input[type="file"] {
			display: block;
			background: #cdf;
			padding: 15px;
			border-radius: 3px;
			border: 1px solid rgba(0,0,0,0.1);
			width: 480px;
			margin: auto;
		}
		
		.result {
			display: block;
			background: #cfd;
			padding: 15px;
			border-radius: 3px;
			border: 1px solid rgba(0,0,0,0.1);
			width: 480px;
			margin: 25px auto 0 auto;
		}
		
		.result:empty {
			display: none;
		}
		
		
	</style>
	
	<script>
		
		function imageHandler(input) {
			
			if (input.files) {
				
				var img = document.createElement('img');
				img.src = URL.createObjectURL(input.files[0]);
				img.style.position = 'fixed';
				img.style.top = '-999999px';
				img.style.right = '-999999px';
				document.querySelector('.cell').append(img);
				
				setTimeout(function() {
					
					var canvas = document.createElement('canvas');
					canvas.width = img.clientWidth;
					canvas.height = img.clientHeight;

					var context = canvas.getContext('2d');

					context.drawImage(img, 0, 0);

					var data = context.getImageData(1, 1, 1, 1).data;
					var rgba = 'rgba(' + data[0] + ', ' + data[1] +', ' + data[2] + ', ' + (data[3] / 255) + ');';

					document.querySelector('.result').innerHTML = 'Цвет первого пикселя: ' + rgba;
					
				}, 1000);
				
			}
			
		}
		
	</script>
	
</head>
<body>
	<div class="table">
		<div class="cell">
			<input onchange="imageHandler(this);" type="file">
			<div class="result"></div>
		</div>
	</div>
</body>
</html>

Цепляй в форму любую фотку со своего компа.

Единственное НО, после вставки изображения на страницу нужно время пока оно отрисуется, поэтому нужна небольшая задержка прежде чем пихать фото в холст, иначе пиксели не прочитаются потом.

Написано более трёх лет назад

vaselekk @vaselekk Автор вопроса

Надим Закиров, О ну тут помогло, я скопировал весь ваш код страницы и вроде заработало спасибо

Написано более трёх лет назад
vaselekk @vaselekk Автор вопроса

Надим Закиров, пойду разбирать код, спасибо

Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега JavaScript

Надим Закиров,
Единственное НО, после вставки изображения на страницу нужно время пока оно отрисуется, поэтому нужна небольшая задержка прежде чем пихать фото в холст, иначе пиксели не прочитаются потом.

Прикольненько =)
А onload на картинке заюзать религия не позволяет? Вместо костыльного settimeout

Написано более трёх лет назад
Надим @zkrvndm

Сергей delphinpro, я впервые жизни использую чтение пикселей и Canvas вообще) Просто настрочил по быстрому как мог, то что setTimeout помогает определил методом тыка, но событие load хороший вариант, если дело именно в загрузке картинок. Я то подумал, что получаю пустые пиксели потому, что браузер не успевает отрисовать Blob, а не потому что он не успел загрузится)

Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега JavaScript

Надим Закиров, если бы браузер так медленно рисовал... )

Написано более трёх лет назад
Надим @zkrvndm

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

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

2 комментария

vaselekk @vaselekk Автор вопроса

С чего состоит 1 пиксель,??? вы не знаете?
он состоит с цифр

1 пиксель = "r,g,b "
r - красный
g - зеленый
b - синий

Вместе они дают пиксель,
в моем случае цифры - это 3 числа от 0 до 255,
Если сложно напишите +

Написано более трёх лет назад
Роман @lastuniverse

vaselekk, примите как факт то что вы не понимаете сути вопроса.

Karpion все верно написал, для того чтобы декодировать base64 вам нужно просто нагуглить функцию, которая это делает. Это не сложно, НО в вашем случае не поможет, потому что хоть пиксель и состоит из цветовых компонент rgb, но ваши данные, которые упакованы в base64 не датут эту информацию, потому что ваша картинка "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ ......... 8A/fyiiigD/9k=" это rgb данные упакованные в формат jpeg, который распаковать с помощью js вы вряд ли сможете, но вам это и не нужно.

Для решения вашей задачи, как и написал Надим Закиров, достаточно просто кинуть эту картинку на канвас, который сам все распакует, а затем, уже из канваса вы можете доставать цвета. Пример от Надим Закиров вам в помощь

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+1 ещё

Средний
Чем отличается функция от конструктора и где применять то или это?
- 1 подписчик
- 6 часов назад
- 124 просмотра
2

ответа
JavaScript

+1 ещё

Простой
Как перебрать цвета радуги плавно по циклу?
- 1 подписчик
- 12 часов назад
- 88 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Как закрыть рекомендации rutube iframe?
- 1 подписчик
- вчера
- 85 просмотров
1

ответ
JavaScript

Простой
Как отключить strictMode у плагина intl-tel-input?
- 1 подписчик
- вчера
- 53 просмотра
1

ответ
JavaScript

Простой
Что происходит со свойством класса при присвоении извне?
- 1 подписчик
- вчера
- 82 просмотра
4

ответа
JavaScript

+1 ещё

Простой
Как правильно застримить большой поток из exec(...).stdout в ответ сервера?
- 1 подписчик
- 28 нояб.
- 56 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как запускать только текущее (открытое) видео в слайдере swiper?
- 2 подписчика
- 28 нояб.
- 106 просмотров
1

ответ
JavaScript

+1 ещё

Средний
Как определить инлайн стиль и заменить на соответствующие теги?
- 1 подписчик
- 28 нояб.
- 60 просмотров
1

ответ
JavaScript

+2 ещё

Простой
Писал ли кто-то автотесты с помощью Cypress по виджетам на amCharts 5? Можете помочь разъяснить структуру и синтаксис этого дела?
- 2 подписчика
- 28 нояб.
- 53 просмотра
0

ответов
JavaScript

Простой
Как не прекращая цикл пройтись?
- 1 подписчик
- 27 нояб.
- 110 просмотров
0

ответов
Показать ещё Загружается…

JavaScript FullStack разработчик

Rocket • Смоленск

от 80 000 до 130 000 ₽

Frontend-разработчик JavaScript

div. • Ставрополь

от 40 000 до 90 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

Генерация лидов для веб-студии по разработке сайтов

30 нояб. 2024, в 21:01

10000 руб./за проект

Разработка дизайна по ТЗ

30 нояб. 2024, в 20:49

2000 руб./за проект

Запуск канала на Youtube

30 нояб. 2024, в 20:18

5000 руб./за проект

Зачем вам это нужно? Что вы планируйте делать с этим массивом?
vaselekk, небось капчу какую хотите распознать?
vaselekk, ладно, не отвечайте. Просто без Canvas это никак в лоб не сделать. Если же вам нужно просто отобразить загруженную картинку, то это делается не так.
Надим Закиров, хотел на информатике программировать, там токо комп старый 32 бит, я хотел в браузере учительнице сделать программу на js, а функция канвас требует сервер
vaselekk, вообще то не требует. Вы вполне можете в браузере используя канвас получить цвета всех пикселей и для этого не нужно никаких серверов.
Надим Закиров,для получений пикселей нужно сервер , я уже проверял
vaselekk, да ну?
https://developer.mozilla.org/ru/docs/Web/API/Canv...

Объект ImageData представляет базовые пиксельные данные области объекта холста. Он содержит следующие атрибуты только для чтения:
width - Ширина изображения в пикселях.
height - Высота изображения в пикселях.
data - представляет собой одномерный массив, содержащий данные в порядке RGBA, с целыми значениями от 0 до 255 (в комплекте).
Надим Закиров, у меня ошибка Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The source width is 0.
Надим Закиров, так что неработает хром ругаеться
vaselekk, вы пытайтесь скормить картинку с нулевой шириной, конечно же у вас ошибка.
Надим Закиров,
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #color { background: red; } </style> <title> </title> </head> <body> <canvas id="canvas"></canvas> <div id="color">цвет</div> <div id="object" style="display: flex;">[<div id="results"></div>]</div> <script type="text/javascript"> var mass_color = []; var img = new Image(); img.src = '2.png'; var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); canvas.width = 1000; canvas.height = 1000 img.onload = function() { ctx.drawImage(img, 0, 0, 1000, 1000); img.style.display = 'none'; }; var color = document.getElementById('color'); function pick(event) { var x = event.layerX; var y = event.layerY; var pixel = ctx.getImageData(x, y, 1, 1, 1000, 1000); var data = pixel.data; var rgba = 'rgba(' + data[0] + ', ' + data[1] + ', ' + data[2] + ', ' + (data[3] / 255) + ')'; color.style.background = rgba; color.textContent = rgba; results.innerHTML += `"${data[0]}${data[1]}${data[2]}${data[3] / 255}",` } canvas.addEventListener('mousemove', pick); </script> </body> </html>

если знаете так попробуйте и убедитесь что хром ругаеться, просто вставьте место 2.png вашу картинку
vaselekk, мне не нужен твой код. Просто прими как факт, что ты делаешь что-то не так.

Допустим у тебя на странице есть тег img с изображением. Получить цвет определенного пикселя можно вот так:

// Берём любое изображение: var img = document.querySelector('img'); // Создаём <canvas> того же размера: var canvas = document.createElement('canvas'); canvas.width = img.clientWidth; canvas.height = img.clientHeight; var context = canvas.getContext('2d'); // Копируем изображение в canvas: context.drawImage(img, 0, 0); // Вытаскиваем цвет нужного пикселя: var data = context.getImageData(x, y, 1, 1).data; var rgba = 'rgba(' + data[0] + ', ' + data[1] +', ' + data[2] + ', ' + (data[3] / 255) + ')'; console.dir(rgba);

Только замени x и y на координаты нужного пикселя.
Надим Закиров, ваш код постоянно показует 0,0,0,0 картинку я вставил, и значение x,y выставил
Надим Закиров, проверьте и убедитесь что ваш код постоянно показует 0
vaselekk, Я попробовал в ваш код добавить window.onload и наступил на туже ошибку что ругался хром, если неверите попробуйте сами, Я попытался запустить файл с разных браузеров и все безуспешно
vaselekk, вы пытайтесь скормить кривую картинку, из-за этого ошибка у вас вероятно.
Надим Закиров, не надо пудрить мозги людям. vaselekk всё верно пишет, там есть и будет ошибка, из-за секюрити фич.
Пожалуйста, гугли:
javascript canvas context getimagedata The operation is insecure

Там, вроде, есть решения.
WbICHA, но ведь автор вопроса грузит изображение с поля, а не откуда с чужого домена. С чего бы ошибкам то быть?
Надим Закиров, О ну тут помогло, я скопировал весь ваш код страницы и вроде заработало спасибо
Надим Закиров, пойду разбирать код, спасибо
Надим Закиров,
Единственное НО, после вставки изображения на страницу нужно время пока оно отрисуется, поэтому нужна небольшая задержка прежде чем пихать фото в холст, иначе пиксели не прочитаются потом.

Прикольненько =)
А onload на картинке заюзать религия не позволяет? Вместо костыльного settimeout
Сергей delphinpro, я впервые жизни использую чтение пикселей и Canvas вообще) Просто настрочил по быстрому как мог, то что setTimeout помогает определил методом тыка, но событие load хороший вариант, если дело именно в загрузке картинок. Я то подумал, что получаю пустые пиксели потому, что браузер не успевает отрисовать Blob, а не потому что он не успел загрузится)
Надим Закиров, если бы браузер так медленно рисовал... )
Сергей delphinpro, да кто же его знает?) Да и компы по мощности все разные, у меня к примеру есть ноут на атоме, он не используется уже много лет и браузер там настолько тормозной, что уй, там как раз картинки по секунде наверное и отрисовывались бы.

Answer 1 · 2020-12-18 22:19:03

Ну, изучите, как декодируется base64. Потом преобразуйте бинарные данные так, как Вам хочется - я так не понял, что означают цифры в Вашем примере.

Как перевести base64 в значение пикселей?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт