Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 08.10.2013, 16:52   #1
datgen
Пользователь
 
Регистрация: 30.03.2011
Сообщений: 36
По умолчанию сделать инвертацию по нажатию кнопки

Здравствуйте,подскажите как сделать инвертацию загруженной картинки в отдельной функции которую можно было бы вызвать например по нажатию кнопки.
Вот мой код.Я не могу получить значения img.weight и img.height за пределами события onload.
Код HTML:
<html>
<head>
<meta charset="utf-8"/>

</head>
<body>
<p><input type="file" id="input"/></p>
<p><button onclick="as()">кнопка</button></p>
<canvas id="example"></canvas>
<script type="text/javascript">
var img = new Image;

var control = document.getElementById("input");
control.addEventListener("change", function(event) {
	
	var example = document.getElementById("example"),
    ctx= example.getContext('2d');// Контекст
	img.src = URL.createObjectURL(event.target.files[0]);
	
	img.onload = function() {
		example.width = img.width;
		example.height = img.height;
		ctx.drawImage(img, 0,0);
		var imgd = ctx.getImageData(0, 0, img.width, img.height);
		var pix = imgd.data;
		for (var i = 0, n = pix.length; i < n; i += 4) {
		pix[i] = 255 - pix[i]; // красный канал
		pix[i+1] = 255 - pix[i+1]; // зеленый канал
		pix[i+2] = 255 - pix[i+2]; // синий канал
	}
		ctx.putImageData(imgd, 0, 0);
	}
 }, false);
	
</script>
</body>
</html>

Последний раз редактировалось Stilet; 08.10.2013 в 17:16.
datgen вне форума Ответить с цитированием
Старый 08.10.2013, 20:13   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

Не можешь, потому что она еще не загружена.
Вот это:
Код:
var imgd = ctx.getImageData(0, 0, img.width, img.height);
		var pix = imgd.data;
		for (var i = 0, n = pix.length; i < n; i += 4) {
		pix[i] = 255 - pix[i]; // красный канал
		pix[i+1] = 255 - pix[i+1]; // зеленый канал
		pix[i+2] = 255 - pix[i+2]; // синий канал
	}
		ctx.putImageData(imgd, 0, 0);
выкинь в отдельную функцию, которая будет срабатывать "например при нажатии кнопки".
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Заполнение списка по нажатию кнопки duh_si Microsoft Office Access 47 18.06.2013 18:22
FormCloseQuery по нажатию кнопки bulldog5293 Общие вопросы Delphi 3 17.10.2011 15:37
Сортировка по нажатию кнопки Nate-p Microsoft Office Access 2 25.06.2008 08:35
Картинка появляется по нажатию кнопки! MAKEDON Общие вопросы Delphi 3 13.12.2007 20:17
Картинка появляется по нажатию кнопки! MAKEDON Общие вопросы Delphi 3 12.12.2007 22:49