Загружаю Image. Как получить пикселы?
 

Здорово, парни! У меня есть канва и я в скрипте создаю объект Image и читаю в него картинку "Map.png" - маленькая картинка. Как получить доступ к пикселам, прочитать их, отредактировать и положить обратно. Цель - сделать половину изображения прозрачной. Что-то при помощи контекста и ImageData не получается совсем. ImageData не может получать доступ к пикселам что-ли?. Я уже измучился совсем. Помогите, пожалуйста.

Canvas избавит вас от мучений.

Strongman,

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

картинка от этого прозрачной не стала )

text text text text text text text text text text text text text text text 
<br>text text text text text text text text text text text text text text text 
<br>text text text text text text text text text text text text text text text 
<div style="position: absolute; top: 16px; width: 336px; height: 76px; background: linear-gradient(to right, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 50%), url(https://javascript.ru/forum/images/ca_serenity/misc/logo.gif);"></div>

можно сделать из двух дивов, для них выставить opacity сколько надо

:)

<style>
  img {
   position: absolute;
   opacity: .5;
   left: 0;
   top: 0;
  }
  .a{
  clip: rect(0px, auto, auto, 168px);
   opacity: 1;
  }

  </style>
  text text text text text text text text text text text text text text text
<br>text text text text text text text text text text text text text text text
<br>text text text text text text text text text text text text text text text
  <img src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="">
  <img src="https://javascript.ru/forum/images/ca_serenity/misc/logo.gif" alt="" class="a">

<style>
  img {
   position: absolute;
   left: 0;
   top: 0;
   greetings: guys;
  }
  </style>
  text text text text text text text text text text text text text text text
<br>text text text text text text text text text text text text text text text
<br>text text text text text text text text text text text text text text text
  <img src="http://i77.beon.ru/60/78/2367860/60/96865460/QRHAEO.png" alt="" class="a">

Без опасити :D

Спасибо за ответы. А вот мне интересно все-таки тем способом, как я делал. Т.е. создаем канву, контекст, потом объект Image, потом читаю в Image картинку "Map.png". Да событие onload есть. И картинка является частью сайта - просто файл в папке лежит и все.

img.src = "Map.png";
img.onload = function()
{
    Context.drawImage(img, 0, 0);
}

Она отображается, но она как-будто над канвой и не редактируется. Вот это самое плохое, что я отметил для себя. Потом я читаю пикселы с ImageData:

function MMX()
{
ID = Context.getImageData(0, 0, 500, 300);
for(y = 0; y < 300; y++)
{
    M = 4*w*y;
    Text.innerHTML += "\n Stroka: y = " + y + "\n";	
    Text.innerHTML += "R = " + ID.data[M] + "\n"; 
    Text.innerHTML += "G = " + ID.data[M+1] + "\n";
    Text.innerHTML += "B = " + ID.data[M+2] + "\n"; 
    Text.innerHTML += "A = " + ID.data[M+3] + "\n"; 
    for(x = 0; x < 500; x++)
	{
	    M = 4*(w*y + x);
		/*
		Text.innerHTML += "\n Pixel: x = " + x + ", y = " + y + "\n";
		Text.innerHTML += "R = " + ID.data[M] + "\n"; 
                Text.innerHTML += ID.data[M+1]; 
		Text.innerHTML += ID.data[M+2]; 
                Text.innerHTML += ID.data[M+3];         
		*/
	}
}	
Context.putImageData(ID, 0, 0);

Text - это textarea. Как мне прочитать канву таким способом или это невозможно? Цель я уже говорил - нужно сделать половину пикселей прозрачными. Помогите, пожалуйста, еще разок.:)

Здесь проблема в том, что Opacity у изображения регулируется целиком. Мне нужно изменить прозрачность для каждого пикселя.

Strongman,
https://javascript.ru/forum/misc/669...tml#post441671

Рони, что-то Ваш пример не работает. Хотя тот чувак написал, что у него работает. Там какая-то ошибка вылетает:

Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
at getColorData (file:///Force.html:54:17)
at Image.myImage.onload (file:///Force.html:39:13)
getColorData @ Force.html:54
myImage.onload @ Force.html:39

И указывает на строку, где getImageData:
function getColorData()
{
myImage = ctx.getImageData(0, 0, 200, 200);

Можете помочь с этим?