/
index.md
158 lines (123 loc) · 6.16 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
---
title: CanvasRenderingContext2D.putImageData()
slug: Web/API/CanvasRenderingContext2D/putImageData
---
{{APIRef}}
**`CanvasRenderingContext2D.putImageData()`** метод Canvas 2D API рисует данные из заданного {{domxref("ImageData")}} объекта на холст. На этот метод не влияет матрица преобразования холста.
> **Примечание:** Данные изображения могут быть получены с холста с помощью метода {{domxref("CanvasRenderingContext2D.getImageData()", "getImageData()")}}.
Вы можете найти больше информации о `putImageData()` и общих манипуляциях с содержимым холста в статье [Пиксельные манипуляции с холстом](/ru/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas).
## Синтаксис
```
void ctx.putImageData(imageData, dx, dy);
void ctx.putImageData(imageData, dx, dy, dirtyX, dirtyY, dirtyWidth, dirtyHeight);
```
### Параметры
- `imageData`
- : Объект {{domxref("ImageData")}}, содержащий массив значений пикселей..
- `dx`
- : Горизонтальная позиция (координата x), в которой необходимо разместить данные изображения на целевом холсте.
- `dy`
- : Вертикальная позиция (координата y), в которой необходимо разместить данные изображения на целевом холсте.
- `dirtyX`{{optional_inline}}
- : Горизонтальная позиция (координата x) верхнего левого угла, из которого будут извлечены данные изображения. По умолчанию 0.
- `dirtyY` {{optional_inline}}
- : Вертикальная позиция (координата y) верхнего левого угла, из которого будут извлечены данные изображения. По умолчанию 0.
- `dirtyWidth` {{optional_inline}}
- : Ширина прямоугольника для рисования. По умолчанию ширина данных изображения.
- `dirtyHeight` {{optional_inline}}
- : Высота прямоугольника для рисования. По умолчанию высота данных изображения.
### Ошибки
- `NotSupportedError`
- : Выбрасывается, если любой из аргументов бесконечен.
- `InvalidStateError`
- : Выбрасывается, если данные объекта ImageData были отделены.
## Примеры
### Понимание putImageData
Чтобы понять, что этот алгоритм делает под капотом, вот реализация сверху {{domxref("CanvasRenderingContext2D.fillRect()")}}.
#### HTML
```html
<canvas id="canvas"></canvas>
```
#### JavaScript
```js
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
function putImageData(
ctx,
imageData,
dx,
dy,
dirtyX,
dirtyY,
dirtyWidth,
dirtyHeight,
) {
let data = imageData.data;
let height = imageData.height;
let width = imageData.width;
dirtyX = dirtyX || 0;
dirtyY = dirtyY || 0;
dirtyWidth = dirtyWidth !== undefined ? dirtyWidth : width;
dirtyHeight = dirtyHeight !== undefined ? dirtyHeight : height;
let limitBottom = dirtyY + dirtyHeight;
let limitRight = dirtyX + dirtyWidth;
for (let y = dirtyY; y < limitBottom; y++) {
for (let x = dirtyX; x < limitRight; x++) {
var pos = y * width + x;
ctx.fillStyle =
"rgba(" +
data[pos * 4 + 0] +
"," +
data[pos * 4 + 1] +
"," +
data[pos * 4 + 2] +
"," +
data[pos * 4 + 3] / 255 +
")";
ctx.fillRect(x + dx, y + dy, 1, 1);
}
}
}
// Нарисуйте контент на холсте
ctx.fillRect(0, 0, 100, 100);
// Создайте объект ImageData из него
let imagedata = ctx.getImageData(0, 0, 100, 100);
// используйте функцию putImageData, которая иллюстрирует, как работает putImageData
putImageData(ctx, imagedata, 150, 0, 50, 50, 25, 25);
```
#### Результат
{{ EmbedLiveSample('Понимание_putImageData') }}
### Потеря данных из-за оптимизации браузера
> **Предупреждение:** Из-за характера потерь при преобразовании в и из предварительно умноженных значений альфа-цвета пиксели, которые были только что установлены с помощью `putImageData()`, могут быть возвращены в эквивалентный `getImageData()` в качестве различных значений.
#### JavaScript
```js
const canvas = document.createElement("canvas");
canvas.width = 1;
canvas.height = 1;
const context = canvas.getContext("2d");
const imgData = context.getImageData(0, 0, canvas.width, canvas.height);
const pixels = imgData.data;
pixels[0 + 0] = 1;
pixels[0 + 1] = 127;
pixels[0 + 2] = 255;
pixels[0 + 3] = 1;
console.log("before:", pixels);
context.putImageData(imgData, 0, 0);
const imgData2 = context.getImageData(0, 0, canvas.width, canvas.height);
const pixels2 = imgData2.data;
console.log("after:", pixels2);
```
Вывод может выглядеть так:
```
before: Uint8ClampedArray(4) [ 1, 127, 255, 1 ]
after: Uint8ClampedArray(4) [ 255, 255, 255, 1 ]
```
## Спецификации
{{Specifications}}
## Совместимость с браузерами
{{Compat}}
## Смотрите также
- Интерфейс, определяющий это свойство: {{domxref("CanvasRenderingContext2D")}}
- {{domxref("ImageData")}} объект
- {{domxref("CanvasRenderingContext2D.getImageData()")}}
- [Пиксельные манипуляции с холстом](/ru/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas)