Полезная информация

Заказывай стафф с атрибутикой Mozilla и... пусть все вокруг завидуют тебе! Быть уникальным - быть с Mozilla!

№109-10-2012 10:40:52

Van
Участник
 
Группа: Members
Зарегистрирован: 09-10-2012
Сообщений: 32
UA: Firefox 15.0

Что врет - это getImageData или это putImageData

В  FF  почему то циферки не сходятся с теми что записываю в getImageData, когда их повторно извлекаю их того же самого getImageData для проверки.
Более подробно вопрос изложен http://forum.kaimi.ru/viewtopic.php?id=219
При работе с изображениями на холсте треть от общего числа изменений попадает в брак.

Есть ли этому объяснение?

Отсутствует

 

№209-10-2012 15:51:16

Van
Участник
 
Группа: Members
Зарегистрирован: 09-10-2012
Сообщений: 32
UA: IE 8.0

Re: Что врет - это getImageData или это putImageData

Чтобы не засорять интернет привел здесь только ссылку на сам вопрос.
Но если нужно тут изложить подробно, то токмо ради пользы дела, пожалуйста:

Почему не сходятся цифры с теми что записываю в getImageData, когда их повторно извлекаю их того же самого getImageData для проверки:

Выделить код

Код:

var x = 256, // 255 является максимальным значением 
y = 1, // Coordinates of image pixel that we will modify 
cxy = x*y, can = document.createElement('canvas');can.width = x;
can.height = y;document.body.appendChild(can);
var ctx = can.getContext('2d'),  // Get drawing context
o=new Image(); //создание нового объекта
o.onload=function() {
 ctx.drawImage(o,0,0); // размещение объекта на холсте
 var imDat = ctx.getImageData(0, 0, can.width, can.height);//получаем bitmap     
 for(var j =0; j<cxy;j++){ // Set pixel color - начинаем запись своих чисел (заменяем то что было)   
   imDat.data[j] = j;               
 }              
 ctx.putImageData(imDat, 0, 0);//перезапись рисунка с обновленными данными 
 
 //повторно извлекаем свои же только что записанные данные для проверки
 var imDat2 = ctx.getImageData(0, 0, can.width, can.height);
 var eh; 
 for(var j =0; j<cxy;j++){ // свераем старые и новые данные в порядке возрастания чисел
  eh = imDat.data[j] == imDat2.data[j]; eh = eh?'':' -----> '+eh;   
  // выводим на печать результаты проверки
  document.write(j+" ... "+imDat.data[j]+" == "+imDat2.data[j]+ " <b>" +eh+"</b><br>");  
 } 
};
o.src="1.jpg"; //любой ваш рисунок

Вот это я получаю в браузере,
false это те строки, в которых числа мной записанные обратно выходят совершенно непонятные
(например записал 10, а получил 23, записал 20, а получил назад 22)  :

0 ... 0 == 0
1 ... 1 == 85 -----> false
2 ... 2 == 85 -----> false
3 ... 3 == 3
4 ... 4 == 36 -----> false
5 ... 5 == 36 -----> false
6 ... 6 == 36 -----> false
7 ... 7 == 7
8 ... 8 == 23 -----> false
9 ... 9 == 23 -----> false
10 ... 10 == 23 -----> false
11 ... 11 == 11
12 ... 12 == 17 -----> false
13 ... 13 == 17 -----> false
14 ... 14 == 17 -----> false
15 ... 15 == 15
16 ... 16 == 26 -----> false
17 ... 17 == 26 -----> false
18 ... 18 == 26 -----> false
19 ... 19 == 19
20 ... 20 == 22 -----> false
21 ... 21 == 22 -----> false
22 ... 22 == 22
23 ... 23 == 23
24 ... 24 == 28 -----> false
25 ... 25 == 28 -----> false
26 ... 26 == 28 -----> false
27 ... 27 == 27
28 ... 28 == 32 -----> false
29 ... 29 == 32 -----> false
30 ... 30 == 32 -----> false
31 ... 31 == 31
32 ... 32 == 36 -----> false
33 ... 33 == 36 -----> false
34 ... 34 == 36 -----> false
35 ... 35 == 35
36 ... 36 == 39 -----> false
37 ... 37 == 39 -----> false
38 ... 38 == 39 -----> false
39 ... 39 == 39
40 ... 40 == 41 -----> false
41 ... 41 == 41
42 ... 42 == 47 -----> false
43 ... 43 == 43
44 ... 44 == 48 -----> false
45 ... 45 == 48 -----> false
46 ... 46 == 48 -----> false
47 ... 47 == 47
48 ... 48 == 50 -----> false
49 ... 49 == 50 -----> false
50 ... 50 == 50
51 ... 51 == 51
52 ... 52 == 55 -----> false
53 ... 53 == 55 -----> false
54 ... 54 == 55 -----> false
55 ... 55 == 55
56 ... 56 == 56
57 ... 57 == 60 -----> false
58 ... 58 == 60 -----> false
59 ... 59 == 59
60 ... 60 == 60
61 ... 61 == 64 -----> false
62 ... 62 == 64 -----> false
63 ... 63 == 63
64 ... 64 == 64
65 ... 65 == 68 -----> false
66 ... 66 == 68 -----> false
67 ... 67 == 67
68 ... 68 == 68
69 ... 69 == 71 -----> false
70 ... 70 == 71 -----> false
71 ... 71 == 71
72 ... 72 == 74 -----> false
73 ... 73 == 74 -----> false
74 ... 74 == 74
75 ... 75 == 75
76 ... 76 == 77 -----> false
77 ... 77 == 77
78 ... 78 == 80 -----> false
79 ... 79 == 79
80 ... 80 == 82 -----> false
81 ... 81 == 82 -----> false
82 ... 82 == 82
83 ... 83 == 83
84 ... 84 == 85 -----> false
85 ... 85 == 85
86 ... 86 == 87 -----> false
87 ... 87 == 87
88 ... 88 == 89 -----> false
89 ... 89 == 89
90 ... 90 == 92 -----> false
91 ... 91 == 91
92 ... 92 == 93 -----> false
93 ... 93 == 93
94 ... 94 == 96 -----> false
95 ... 95 == 95
96 ... 96 == 97 -----> false
97 ... 97 == 97
98 ... 98 == 100 -----> false
99 ... 99 == 99
100 ... 100 == 101 -----> false
101 ... 101 == 101
102 ... 102 == 103 -----> false
103 ... 103 == 103
104 ... 104 == 104
105 ... 105 == 107 -----> false
106 ... 106 == 107 -----> false
107 ... 107 == 107
108 ... 108 == 110 -----> false
109 ... 109 == 110 -----> false
110 ... 110 == 110
111 ... 111 == 111
112 ... 112 == 113 -----> false
113 ... 113 == 113
114 ... 114 == 115 -----> false
115 ... 115 == 115
116 ... 116 == 117 -----> false
117 ... 117 == 117
118 ... 118 == 120 -----> false
119 ... 119 == 119
120 ... 120 == 120
121 ... 121 == 122 -----> false
122 ... 122 == 122
123 ... 123 == 123
124 ... 124 == 124
125 ... 125 == 126 -----> false
126 ... 126 == 126
127 ... 127 == 127
128 ... 128 == 128
129 ... 129 == 130 -----> false
130 ... 130 == 130
131 ... 131 == 131
132 ... 132 == 132
133 ... 133 == 134 -----> false
134 ... 134 == 134
135 ... 135 == 135
136 ... 136 == 137 -----> false
137 ... 137 == 137
138 ... 138 == 139 -----> false
139 ... 139 == 139
140 ... 140 == 140
141 ... 141 == 142 -----> false
142 ... 142 == 142
143 ... 143 == 143
144 ... 144 == 145 -----> false
145 ... 145 == 145
146 ... 146 == 147 -----> false
147 ... 147 == 147
148 ... 148 == 148
149 ... 149 == 150 -----> false
150 ... 150 == 150
151 ... 151 == 151
152 ... 152 == 153 -----> false
153 ... 153 == 153
154 ... 154 == 154
155 ... 155 == 155
156 ... 156 == 157 -----> false
157 ... 157 == 157
158 ... 158 == 158
159 ... 159 == 159
160 ... 160 == 161 -----> false
161 ... 161 == 161
162 ... 162 == 162
163 ... 163 == 163
164 ... 164 == 164
165 ... 165 == 166 -----> false
166 ... 166 == 166
167 ... 167 == 167
168 ... 168 == 168
169 ... 169 == 170 -----> false
170 ... 170 == 170
171 ... 171 == 171
172 ... 172 == 173 -----> false
173 ... 173 == 173
174 ... 174 == 174
175 ... 175 == 175
176 ... 176 == 176
177 ... 177 == 178 -----> false
178 ... 178 == 178
179 ... 179 == 179
180 ... 180 == 181 -----> false
181 ... 181 == 181
182 ... 182 == 182
183 ... 183 == 183
184 ... 184 == 184
185 ... 185 == 185
186 ... 186 == 186
187 ... 187 == 187
188 ... 188 == 188
189 ... 189 == 189
190 ... 190 == 190
191 ... 191 == 191
192 ... 192 == 192
193 ... 193 == 193
194 ... 194 == 194
195 ... 195 == 195
196 ... 196 == 196
197 ... 197 == 197
198 ... 198 == 198
199 ... 199 == 199
200 ... 200 == 200
201 ... 201 == 202 -----> false
202 ... 202 == 202
203 ... 203 == 203
204 ... 204 == 204
205 ... 205 == 205
206 ... 206 == 206
207 ... 207 == 207
208 ... 208 == 209 -----> false
209 ... 209 == 209
210 ... 210 == 210
211 ... 211 == 211
212 ... 212 == 212
213 ... 213 == 213
214 ... 214 == 214
215 ... 215 == 215
216 ... 216 == 216
217 ... 217 == 217
218 ... 218 == 218
219 ... 219 == 219
220 ... 220 == 220
221 ... 221 == 221
222 ... 222 == 222
223 ... 223 == 223
224 ... 224 == 224
225 ... 225 == 225
226 ... 226 == 226
227 ... 227 == 227
228 ... 228 == 228
229 ... 229 == 229
230 ... 230 == 230
231 ... 231 == 231
232 ... 232 == 232
233 ... 233 == 233
234 ... 234 == 234
235 ... 235 == 235
236 ... 236 == 236
237 ... 237 == 237
238 ... 238 == 238
239 ... 239 == 239
240 ... 240 == 240
241 ... 241 == 241
242 ... 242 == 242
243 ... 243 == 243
244 ... 244 == 244
245 ... 245 == 245
246 ... 246 == 246
247 ... 247 == 247
248 ... 248 == 248
249 ... 249 == 249
250 ... 250 == 250
251 ... 251 == 251
252 ... 252 == 252
253 ... 253 == 253
254 ... 254 == 254
255 ... 255 == 255

Из диапазона чисел от 0 до 255 процентов 30  -  брак ?

Добавлено 09-10-2012 16:01:01
Особенно не нравятся браузеру FF числа 48, 49, 52, 53, 54, и еще ряд других.
Зная браковые числа, можно их конечно не трогать, не менять, но тогда получим искажение рисунка.
Это баг Firefox ? или есть какой то нормальный вариант тестирования и использования холста?

Отредактировано Van (09-10-2012 16:01:01)

Отсутствует

 

№309-10-2012 17:57:12

Van
Участник
 
Группа: Members
Зарегистрирован: 09-10-2012
Сообщений: 32
UA: IE 8.0

Re: Что врет - это getImageData или это putImageData

Первоначальный рисунок здесь вообще ни при чем.
Рисунок ведь у Вас свой, правда? а ошибки и у Вас проявились?
jpg, png - все это лишь первоначальные данные, затравка так сказать, работа ведь идет с холстом и с его рисунком но не с jpg и png.
Сглаживание в js - можно уточнить что это?

Отсутствует

 

№410-10-2012 00:19:30

Van
Участник
 
Группа: Members
Зарегистрирован: 09-10-2012
Сообщений: 32
UA: IE 8.0

Re: Что врет - это getImageData или это putImageData

Пробовал и без png, jpg, тестировал только с прямоугольником холста, результа прежний. Вообще то это не баг браузера.

Если заполнение канваса идет равномерно, т.е. рядом расположенные пиксели меняют свое значение скажем на единичку,
то результат идеальный, один к одному, что вложил то и получил, и при проверке все сходится. Серый цвет в итоге, или что то подобное.
Но если заполнять совершенно разнобойными числами, например 6, 207, 54 ..., то правильными при проверке оказывается лишь малая часть от общего количества изменений.
Как Вы и говорите наступает какое то сглаживание.  Например 58,59,60,61,62 заменяются на 60,60,60,62,61 (странно, да?).
Ну а резкие границы цвета и прозрачности, они же есть ? И где почитать за это самое сглаживание? Что там складывается, перемножается, группируется?

Отсутствует

 

№520-10-2012 19:58:49

Unghost
Призрак-админ
 
Группа: Administrators
Откуда: Moscow, Russia
Зарегистрирован: 08-10-2004
Сообщений: 11771

Re: Что врет - это getImageData или это putImageData

Тема перенесена из форума «Firefox» в форум «Разработка».


Do not meddle in the affairs of Wizards, for they are subtle and quick to anger.

Отсутствует

 

№604-05-2013 23:01:23

svtux
Участник
 
Группа: Members
Зарегистрирован: 04-05-2013
Сообщений: 5
UA: Firefox 20.0

Re: Что врет - это getImageData или это putImageData

Я прошу прощения за археологизм, но на тему использования canvas пока мало информации на русском языке, поэтому напишу, что у вас ошибка в коде, вот здесь:

Выделить код

Код:

for(var j =0; j<cxy;j++) {   
   imDat.data[j] = j;               
}

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

Резюмирую:
То, что записываем в getImageData, то и получим при повторном извлечении их из того же самого getImageData.

Отсутствует

 

№705-05-2013 02:09:40

Van
Участник
 
Группа: Members
Зарегистрирован: 09-10-2012
Сообщений: 32
UA: IE 8.0

Re: Что врет - это getImageData или это putImageData

svtux ошибка и правда в этом месте, т.к. других мест как бы не так и много, и видимо Вы знаете причину, но я не могу понять почему так нельзя делать, ведь присваиваемые значения могут быть любыми?  в т.ч. и упорядочеными по возрастанию/убыванию ?

Что интересно, если закоментировать document.write , то можно увидеть измененную картинку с новыми значениями (от 0 до 255), визуально это серо-белые градиентные полоски расположенные вертикально. И это доказывает что браузер все же воспринял новые значения и отобразил их, а вот почему при повторном считывании обновленных данных проявляется ошибка. Может как то передача по ссылке происходит, а не по значению?

Отсутствует

 

№805-05-2013 12:51:37

Van
Участник
 
Группа: Members
Зарегистрирован: 09-10-2012
Сообщений: 32
UA: IE 8.0

Re: Что врет - это getImageData или это putImageData

okkamas_knife - вот так всегда, Вам понятно мне пока не очень :(
getImageData и putImageData это две не связанные между собой функции - это так.

канвас изначально не предназначен для хранения информации - хорошо, не предназначен, но ведь и не запрещено как бы воспользоваться таким положением.
Он предназначен для отображения переданной ему инфы и получения изображения, которое получается в результате рендеринга - на первый взгляд, а кто не дает воспользоваться им как хранилищем?

var imDat2 - это вторая, объявленная переменная, совершенно новый объект.

Выделить код

Код:

<!DOCTYPE html><HTML><body><script>
var x=256,y=100,cxy=x*y*4,can=document.createElement('canvas');can.width=x;can.height=y;document.body.appendChild(can);
var ctx=can.getContext('2d'),o=new Image();
o.onload=function(){
 ctx.drawImage(o,0,0);
 var imDat=ctx.getImageData(0,0,can.width,can.height),errr='',i=0;

 for(var j =0; j<cxy;j++){
 //for(var j =0; j<100;j++){
  imDat.data[j] = i*1;
  //imDat.data[j] = 120;
  //i=i<255?i+1:0;
  i=i<255?i+1:0;
 }
 ctx.putImageData(imDat, 0, 0);
 i = 0;
 
 var imDat2 = ctx.getImageData(0, 0, can.width, can.height),eh,k=0,braks=[];
 for(var j=0;j<cxy;j++){eh=imDat.data[j] == imDat2.data[j];
  if(eh)eh ='';else{k++;eh = ' -----> '+eh;if(!in_ar(i,braks))braks.push(i);}
  errr +=j+" ... "+imDat.data[j]+" == "+imDat2.data[j]+ " <b>" +eh+"</b><br>";
  i=i<255?i+1:0;
 }
 alert("From "+cxy+" -->brak ="+k+"\n\n"+Math.floor((k/cxy)*100)+' % BRAK ?');
   /*
 document.write(errr);
 document.write("<br><br><h1>FF like it:</h1><br>");
 braks.sort(function(a,b){return a-b;});
 for(var j in braks)document.write(braks[j]+" ");
 document.write("<br><h1>From 255 -> "+braks.length+" integers brak, "+ Math.floor((braks.length/255)*100)  +"%</h1><br>");
     */
};
function in_ar(a,b){for(var c in b)if(b[c]==a)return true}
o.src="1.jpg";//любой ваш рисунок ( 256 х 256 например )
</script></body></html>

тот канвас в который пишете значение это одно а тот из которого берёте это другое.

можно ли пример? наглядно меняющий ситуацию

Добавлено 05-05-2013 13:02:27

а когда запрашиваете то получаете именно то что получилось в результате обработки.

оно тем более должно совпадать

Добавлено 05-05-2013 13:05:08

Нельзя просто порядковые номера присвоить данным

- ПОЧЕМУ ?

Добавлено 05-05-2013 13:08:13
И как сделать так, чтобы проблемы не осталось практически ?

Или все же браузер ?

Отредактировано Van (05-05-2013 13:08:13)

Отсутствует

 

№905-05-2013 19:11:38

Van
Участник
 
Группа: Members
Зарегистрирован: 09-10-2012
Сообщений: 32
UA: IE 8.0

Re: Что врет - это getImageData или это putImageData

Придумал же кто то примечания, попробую ими воспользоваться:

// 255 является максимальным значением
// Coordinates of image pixel that we will modify
// Get drawing context
// создание нового объекта
// размещение объекта на холсте
// получаем bitmap     
// Set pixel color - начинаем запись своих чисел (заменяем то что было)   
// перезапись рисунка с обновленными данными
// повторно извлекаем свои же только что записанные данные для проверки
// сверяем старые и новые данные в порядке возрастания чисел
// выводим на печать результаты проверки
// любой ваш рисунок

Задача поставленная: заменить в рисунке на холсте значения цвета r,g,b,a, включая и альфа канал.
И проверить то что получилось, проверить какие именно значения попали в r,g,b,a каждого пиксела.
И естественно посмотреть какой же рисунок при этом визуально получился.
Сравнить полученный рисунок с начальным, визуально отметив разницу.
Без дополнительных эффектов, без анимации, но с учетом того что это все же динамическое изменение рисунка.
Мой пробный скрипт не получился,
могу ли я Вас попросить привести код скрипта по этому вопросу?

Объяснение с wav файлом примерно понятно, в общих чертах, но не очень применительно к рисунку.

Добавлено 05-05-2013 19:24:03
Скрипт не скрипт, не всю задачу конечно, но хотя бы те несколько строк, которые у меня не идут, и по Вашему мнению являются причиной ошибки, т.е. как правильно их записать, чтобы избежать ошибки

Отредактировано Van (05-05-2013 19:24:03)

Отсутствует

 

№1007-05-2013 04:02:17

svtux
Участник
 
Группа: Members
Зарегистрирован: 04-05-2013
Сообщений: 5
UA: Firefox 20.0

Re: Что врет - это getImageData или это putImageData

Прошу прощения, что не сразу понял суть вашего эксперимента.

Итак, по-порядку:

Van пишет

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

Не совсем так. Те значения, которые вы присваеваете могут быть любыми, но они должны соответствовать принятому стандарту, и если вы будете присваивать им просто порядковые номера, то, хотя и смысла в этом не вижу, но все же записать так можно.

Ваша ошибка в том, что вы используете альфа-канал, не сразу понял описание, но вообще работать должно вот так (ссылка на оригинал):

whatwg.org пишет

The getImageData(sx, sy, sw, sh) method must, if either the sw or sh arguments are zero, throw an IndexSizeError exception; otherwise, if the scratch bitmap's origin-clean flag is set to false, it must throw a SecurityError exception; otherwise, it must return an ImageData object with width sw and height sh representing the scratch bitmap for the area of that bitmap denoted by the rectangle whose corners are the four points (sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh), in the bitmap's coordinate space units. If the bitmap does not represent each coordinate space unit square using exactly one pixel, the value of each pixel in the returned abject must be derived from the value(s) of the pixel(s) in the bitmap that correspond to the same coordinate. Pixels outside the scratch bitmap must be returned as transparent black. Pixels must be returned as non-premultiplied alpha values. The pixel density of the object returned must be 1.0.

В частности, нас интересуте то, что я выделил жирным, там написано, что пикселы должны быть возвращены без предварительного умножения на значение альфа-канала, а плотность пикселей возвращенного объекта должна быть 1 (имеется ввиду прозрачность).
В особенностях работы с растровой графикой на мониторах я не силен, но смею предположить, что происходит своего рода интерполяция получаемого оттунка цвета с учетом его прозрачности на холсте, как если бы объект был не прозрачным, т.е. плотность равна 1.

>Может как то передача по ссылке происходит, а не по значению?

Никаких ссылок здесь нет. Все согласно указанным значениям.

Как пример, пожалуйста, вот код:

Выделить код

Код:

var x = 256;
var y = 1;
var cxy = x * y;
var can = document.createElement('canvas');
can.width = x;
can.height = y;

document.body.appendChild(can);

var ctx = can.getContext('2d');  // Get drawing context

var imDat = ctx.createImageData(x, y); //создаем bitmap

for (var j = 0; j < cxy; j++) { // Set pixel color - начинаем запись своих чисел (заменяем то что было)
    for (var i = 0; i < 4; i++) {
        imDat.data[4 * j + i] = j;
    }
}

ctx.putImageData(imDat, 0, 0); // запись рисунка

// повторно извлекаем свои же только что записанные данные для проверки
var imDat2 = ctx.getImageData(0, 0, x, y);
var eh;

var outputString = ""; // здесь будет храниться результат проверки

for (var j = 0; j < 4 * cxy; j++) {
    // свераем старые и новые данные в порядке возрастания чисел
    eh = imDat.data[j] == imDat2.data[j];
    eh = eh ? '' : ' -----> ' + eh;
    // сохраняем результаты проверки
    outputString += ( j + " ... " + imDat.data[j] + " == " + imDat2.data[j] + " <b>" + eh + "</b><br>");
}

// выводим на печать результаты проверки
var newElem = document.createElement('div');
newElem.style.margin = "20px";
newElem.innerHTML = outputString;
document.body.appendChild(newElem);

То есть если вы прозрачность установите везде в значение 255, например, так:

Выделить код

Код:

for (var j = 0; j < cxy; j++) { // Set pixel color - начинаем запись своих чисел (заменяем то что было)
    for (var i = 0; i < 3; i++) {
        imDat.data[4 * j + i] = j;
    }
    imDat.data[4 * j + 3] = 255;
}

то все получится как нужно.

okkamas_knife пишет

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

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

Отсутствует

 

№1107-05-2013 13:36:41

svtux
Участник
 
Группа: Members
Зарегистрирован: 04-05-2013
Сообщений: 5
UA: Firefox 20.0

Re: Что врет - это getImageData или это putImageData

Если бы люди всегда делали только то, что нужно вам, или мне, или кому-то еще, а не им самим, то мир, наверное, был бы "серым" и унылым, зато аккуратным и стройным как муравейник или пчелиный улей.
Я стараюсь не быть столь категоричным в непонятных мне побудительных мотивах других людей.

То есть я хочу сказать, что подобное явление слишком распространено в человеческом обществе, чтобы заострять внимание на каком-то одном конкретном его проявлении.

Кто знает, может быть именно оно является причиной эволюции, её движущей силой.

Простой пример: зачем люди запекают яблоки, ведь они и свежие вкусные, причем, как говорят ученые, еще и гораздо более полезные?!

Отсутствует

 

№1207-05-2013 18:19:43

Van
Участник
 
Группа: Members
Зарегистрирован: 09-10-2012
Сообщений: 32
UA: Chrome 26.0

Re: Что врет - это getImageData или это putImageData

svtux спасибо !

Ссылки очень даже нужно изучить (сначала перевести придется конечно).

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

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

Присваивать просто порядковые номера смысла в этом конечно же не много, но если даже так записать можно, то значит и более полезные присваивания можно творить. Это же проба, тест можно сказать.

Плотность пикселей возвращенного объекта должна быть 1 (имеется ввиду прозрачность) - получается что модификации канваса не позволят делать наложение рисунков? частичное или полное, а жаль!   
Интерполяция виновата ! и браузер тоже, ну никак развернуться не дает  :)

Отсутствует

 

№1307-05-2013 20:09:06

Van
Участник
 
Группа: Members
Зарегистрирован: 09-10-2012
Сообщений: 32
UA: Chrome 26.0

Re: Что врет - это getImageData или это putImageData

globalAlpha = значение прозрачности
Это свойство применяет значение прозрачности ко всем фигурам, рисуемым на холсте (canvas). Допустимое значение может быть от 0.0 (полностью прозрачный) до 1.0 (непрозрачный).

Таки да :)  а если к примеру при некотором событии хочу в верхнем рисунке изменить прозрачность отдельных пикселей или групп произвольных пикселей, не квадратиков, чтобы просвечивалась нижняя картинка с 1.0 на 0.4 ? и затем через время на 0.0 ? менять верхнюю картинку на другую заготовку? При плавном изменении прозрачности заготовок несколько потребуется.

Отсутствует

 

№1409-05-2013 01:21:17

svtux
Участник
 
Группа: Members
Зарегистрирован: 04-05-2013
Сообщений: 5
UA: Firefox 20.0

Re: Что врет - это getImageData или это putImageData

При работе с холстом есть одна особенность - он статичен. То есть если вы хотите сделать анимацию, то вам придется каждый раз перерисовывать весь холст заново.

В вашем случае это означает следующее:

Van пишет

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

То вам нужно будет перерисовать оба рисунка: нижнюю картинку и верхнюю с нужной вам прозрачностью хоть полностью, хоть частично.

Van пишет

и затем через время на 0.0 ?

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

Van пишет

менять верхнюю картинку на другую заготовку? При плавном изменении прозрачности заготовок несколько потребуется.

Заготовку можете вычислять программно в javascript (можно хранить её в памяти, но чаще "дешевле" пересчитать из определенного состояния).

Пример по ссылке:
здесь задан рисунок на белом фоне в формате jpeg;
фон холста для наглядности покрашен в синий цвет;
в начале происходит преобразование картинки в черно-белую;
затем отсеивание белых точек с цветом от rgb(240, 240, 240) и выше и установка их прозрачности в 0.0;
после чего я запоминаю индексы непрозрачных точек для ускорения их обработки в дальнейшем;
и наложение поверх черно-белого изображения его цветной копии с разной степенью прозрачности от 255 до 0 и обратно с шагом 10.

Отсутствует

 

№1509-05-2013 14:06:37

Van
Участник
 
Группа: Members
Зарегистрирован: 09-10-2012
Сообщений: 32
UA: Chrome 26.0

Re: Что врет - это getImageData или это putImageData

Пример интересен. Надо поэкспериментировать.

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

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

перерисовывать весь холст заново - или часть, т.е. холстов может быть несколько (естественно в качестве демо страницы, т.к. никто реально такое делать не будет)

Разница анимация и телевидение. Превращение изображения лица мужчины в изображение лица женщины, ребенка, взрослого, динамическое изменение контуров, цветов,  перемещение объекта по экрану (холсту). Тогда и полный ОК!
Пока альфа канал "туговат".

Отсутствует

 

№1609-05-2013 14:48:14

Van
Участник
 
Группа: Members
Зарегистрирован: 09-10-2012
Сообщений: 32
UA: Chrome 26.0

Re: Что врет - это getImageData или это putImageData

Пример веселенький :)
А то кругом одна статика, или зацикленные баннеры надоедливые.
Убрать лишнее, добавить полезное, немного разнообразия, паузы и динамика, смена сценария и декораций, и дальше все интересней.

Отсутствует

 

№1709-05-2013 18:49:08

Van
Участник
 
Группа: Members
Зарегистрирован: 09-10-2012
Сообщений: 32
UA: Chrome 26.0

Re: Что врет - это getImageData или это putImageData

Ссылки на гугл - универсально! Там правда всего дофигища :)))))))

Демки конечно интересно, и раньше, и сейчас,
ну не эта https://developer.mozilla.org/en-US/demos/detail/html5-video-time-warp/launch
так эта: https://developer.mozilla.org/en-US/demos/detail/ghostwriter-art-studio/launch
https://developer.mozilla.org/ru/demos/detail/panoramic-video/launch
https://developer.mozilla.org/en-US/demos/detail/scene-change-detection-demo/launch
НО это все кадры.
Попрозрачней : https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas
И так что не удалось пока найти демки с манипуляциями с фото хорошего разрешения и с элементами прозрачности.

Отсутствует

 

№1810-05-2013 16:41:13

svtux
Участник
 
Группа: Members
Зарегистрирован: 04-05-2013
Сообщений: 5
UA: Firefox 20.0

Re: Что врет - это getImageData или это putImageData

Как вы справедливо заметили, я не ясно выразился. Перерисовывать весь холст, конечно же, не обязательно. Это оправдано далеко не всегда, то есть только если изменяется большая часть изображения на нём. Можно запросто менять лишь ту часть изображения, которая изменилась, хоть большую область, хоть 1 пиксель. Для каждой задачи можно найти несколько решений.

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

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

Инструмент достаточно хорошо проработан, и уже написано довольно таки много различных фреймворков для работы с ним. А если использовать аппаратное ускорение при работе с контекстом webgl, то еще и скорость обработки будет настолько высока, что уже можно писать довольно амбициозные 3D приложения.

Отсутствует

 

№1910-05-2013 18:12:47

Van
Участник
 
Группа: Members
Зарегистрирован: 09-10-2012
Сообщений: 32
UA: Chrome 26.0

Re: Что врет - это getImageData или это putImageData

Вот. Пока я тут придумываю, серьезные люди давно изучили, и порешали,
и пример даже был.
Good потому что не только мне интересно, скорее наоборот, мне интересно что и другим.
Надо изучить то что уже есть, другими словами учиться и учиться :)

Отсутствует

 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]