You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
`ArrayBuffer`and views are a part of ECMA standard, a part of JavaScript.
3
+
`ArrayBuffer`ve view'lar, JavaScript'in bir parçası olan ECMA standardının bir parçasıdır.
4
4
5
-
In the browser, there are additional higher-level objects, described in [File API](https://www.w3.org/TR/FileAPI/), in particular `Blob`.
5
+
Tarayıcıda başta `Blob` olmak üzere, [File API](https://www.w3.org/TR/FileAPI/)'da tanımlanmış olan çeşitli ek yüksek seviye nesneler de bulunur.
6
6
7
-
`Blob` consists of an optional string `type`(a MIME-type usually), plus `blobParts` -- a sequence of other `Blob` objects, strings and `BufferSources`.
7
+
`Blob`, isteğe bağlı bir `type`karakter dizisi (genellikle bir MIME tipi) ve buna ek olarak `blobParts` - Başka `Blob` objelerinin, stringlerin ve `BufferSource`ların bir dizisi - bölümlerinden meydana gelir.
8
8
9
9
10
10
11
-
The constructor syntax is:
11
+
Kurucu sözdizimi şu şekildedir:
12
12
13
13
```js
14
14
newBlob(blobParts, options);
15
15
```
16
16
17
-
-**`blobParts`** is an array of `Blob`/`BufferSource`/`String`values.
18
-
-**`options`**optional object:
19
-
-**`type`**-- blob type, usually MIME-type, e.g. `image/png`,
20
-
-**`endings`** -- whether to transform end-of-line to make the blob correspond to current OS newlines (`\r\n` or`\n`). By default`"transparent"` (do nothing), but also can be `"native"` (transform).
17
+
-**`blobParts`**, `Blob`/`BufferSource`/`String`değerlerinden oluşan bir dizidir.
18
+
-**`options`**isteğe bağlı objesi:
19
+
-**`type`** blob tipidir ve genellikle `image/png` gibi bir MIME tipidir.
20
+
-**`endings`**, blob'un mevcut işletim sisteminin yeni satır karakterlerine (`\r\n\` veya`\n`) uyumlu olabilmesi için satır sonu karakterlerinin dönüştürülüp dönüştürülmeyeceği ayarı. Varsayılan olarak`"şeffaf"` (hiçbir şey yapma) şeklindedir, fakat aynı şekilde `"yerel"` (dönüştür) değeri de alabilir.
21
21
22
-
For example:
22
+
Örneğin:
23
23
24
24
```js
25
-
//create Blob from a string
25
+
//bir karakter dizisinden Blob oluştur
26
26
let blob =newBlob(["<html>…</html>"], {type:'text/html'});
27
-
//please note: the first argument must be an array [...]
27
+
//not: ilk argüman bir dizi olmalıdır [...]
28
28
```
29
29
30
30
```js
31
-
//create Blob from a typed array and strings
32
-
let hello =newUint8Array([72, 101, 108, 108, 111]); // "hello" in binary form
31
+
//tipli dizi ve karakter dizilerinden bir Blob oluştur
32
+
let hello =newUint8Array([72, 101, 108, 108, 111]); //ikili formatta "hello" değeri
33
33
34
34
let blob =newBlob([hello, '', 'world'], {type:'text/plain'});
-**`byteStart`**-- the starting byte, by default 0.
45
-
-**`byteEnd`**-- the last byte (exclusive, by default till the end).
46
-
-**`contentType`**-- the`type` of the new blob, by default the same as the source.
44
+
-**`byteStart`**başlangıç Byte'ı, varsayılan olarak 0'dır.
45
+
-**`byteEnd`**son Byte (özel, varsayılan olarak sona kadardır)
46
+
-**`contentType`**yeni blob'un`type`ı, varsayılan olarak kaynakla aynıdır
47
47
48
-
The arguments are similar to `array.slice`, negative numbers are allowed too.
48
+
Argümanlar `array.slice` ile benzerdir, negatif sayılar da kabul edilir.
49
49
50
-
```smart header="Blobs are immutable"
51
-
We can't change data directly in a blob, but we can slice parts of blobs, create new blobs from them, mix them into a new blob and so on.
50
+
```smart header="Blob'lar değişmezdir"
51
+
Blob'taki bir veriyi doğrudan değiştiremeyiz fakat blob'u parçalara bölerek bunlardan yeni blob'lar yaratıp bunları da yeni bir blob'ta birleştirebiliriz vesaire.
52
52
53
-
This behavior is similar to JavaScript strings: we can't change a character in a string, but we can make a new corrected string.
53
+
Bu durum JavaScript karakter dizilerininkine benzerdir: bir karakter dizisindeki bir karakteri değiştiremeyiz, fakat düzeltilmiş yeni bir karakter dizisi oluşturabiliriz.
54
54
```
55
55
56
-
## Blob as URL
56
+
## URL olarak Blob
57
57
58
-
A Blob can be easily used as an URL for `<a>`, `<img>`or other tags, to show its contents.
58
+
Bir Blob `<a>`, `<img>`gibi etiketler için, içeriklerini göstermek adına kolayca URL olarak kullanılabilir.
59
59
60
-
Thanks to `type`, we can allso download/upload blobs, and it naturally becomes `Content-Type` in network requests.
60
+
`type` özelliği sağ olsun aynı zamanda blob indirip yükleyebiliriz ve doğal bir şekilde `Content-Type` değerini de ağ isteği içerisinde taşıyor olacaktır.
61
61
62
-
Let's start with a simple example. By\
63
-
clicking on a link you download a dynamically-generated blob with `hello world` contents as a file:
62
+
Basit bir örnekle başlayalım. Linke\
63
+
tıkladığınızda `Merhaba Dünya` içeriğini taşıyan, dinamik olarak oluşturulmuş bir blob'u bir dosya olarak indirebiliyor olun.
64
64
65
65
```html run
66
-
<!-- download attribute forces the browser to download instead of navigating-->
<!-- download özelliği tarayıcıyı adrese gitmektense indirmeye zorlayacaktır-->
67
+
<adownload="hello.txt"href='#'id="link">İndir</a>
68
68
69
69
<script>
70
-
let blob =newBlob(["Hello, world!"], {type:'text/plain'});
70
+
let blob =newBlob(["Merhaba Dünya!"], {type:'text/plain'});
71
71
72
72
link.href=URL.createObjectURL(blob);
73
73
</script>
74
74
```
75
75
76
-
We can also create a link dynamically in JavaScript and simulate a click by `link.click()`, then download starts automatically.
76
+
Aynı zamanda JavaScript'te bir link yaratabilir ve tıklama eylemini `link.click()` ile simüle edebiliriz, ardından indirme otomatik olarak başlayacaktır.
77
77
78
-
Here's the similar code that causes user to download the dynamicallly created Blob, without any HTML:
78
+
Aşağıda hiç HTML içermeden kullanıcının yaratılmış bir Blob'u otomatik olarak indirmesini sağlayacak bir kod yer alıyor:
79
79
80
80
```js run
81
81
let link =document.createElement('a');
82
-
link.download='hello.txt';
82
+
link.download='merhaba.txt';
83
83
84
-
let blob =newBlob(['Hello, world!'], {type:'text/plain'});
84
+
let blob =newBlob(['Merhaba Dünya!'], {type:'text/plain'});
85
85
86
86
link.href=URL.createObjectURL(blob);
87
87
@@ -90,113 +90,113 @@ link.click();
90
90
URL.revokeObjectURL(link.href);
91
91
```
92
92
93
-
`URL.createObjectURL` takes a blob and creates an unique URL for it, in the form `blob:<origin>/<uuid>`.
93
+
`URL.createObjectURL`, bir blob'u alır ve ondan `blob:<kaynak>:<uuid>` formatında benzersiz bir URL oluşturur.
The browser for each url generated by `URL.createObjectURL`stores an the url -> blob mapping internally. So such urls are short, but allow to access the blob.
101
+
`URL.createObjectURL`ile oluşturulmuş her bir URL'in tarayıcısı, url -> blob iç adreslemesini barındırır. Bu nedenle URL'ler kısadır fakat blob'a erişmeye izin verir.
102
102
103
-
A generated url (and hence the link with it) is only valid within the current document, while it's open. And it allows to reference the blob in `<img>`, `<a>`, basically any other object that expects an url.
103
+
Oluşturulmuş URL (ve dolayısıyla onunla bağlantılı link) yalnızca içinde bulunduğu mevcut belge için, açık olduğu sürece geçerlidir ve `<img>`, `<a>` gibi, bir URL bekleyen herhangi bir objedeki blob'u göstermeyi sağlar.
104
104
105
-
There's a side-effect though. While there's an mapping for a blob, the blob itself resides in the memory. The browser can't free it.
105
+
Ancak burada bir yan etki vardır. Bir blob adreslendiğinde blob'un kendisi hafızada bulunur. Tarayıcı onu hafızadan silemez.
106
106
107
-
The mapping is automatically cleared on document unload, so blobs are freed then. But if an app is long-living, then that doesn't happen soon.
107
+
Adresleme döküman kapatıldığında otomatik olarak silinir, böylece blob'lar temizlenmiş olur. Ancak uygulama uzun ömürlü bir yapıdaysa bu hemen gerçekleşmeyecektir.
108
108
109
-
**So if we create an URL, that blob will hang in memory, even if not needed any more.**
109
+
**Bu nedenle yeni bir URL oluşturduğumuzda ona ihtiyacımız kalmasa bile blob hafızada tutulmaya devam edecektir.**
110
110
111
-
`URL.revokeObjectURL(url)` removes the reference from the internal mapping, thus allowing the blob to be deleted (if there are no other references), and the memory to be freed.
111
+
`URL.revokeObjectURL(url)`, referansı iç adreslemeden silecektir; böylece blob'un silinmesini (eğer başka referans kalmadıysa) ve hafızanın boşaltılmasını sağlayacaktır.
112
112
113
-
In the last example, we intend the blob to be used only once, for instant downloading, so we call `URL.revokeObjectURL(link.href)`immediately.
113
+
Son örnekte blob'un yalnızca bir kere anlık indirme için kullanılacağı bir senaryo oluşturduk ve direkt olarak `URL.revokeObjectURL(link.href)`metodunu çağırdık.
114
114
115
-
In the previous example though, with the clickable HTML-link, we don't call `URL.revokeObjectURL(link.href)`, because that would make the blob url invalid. After the revocation, as the mapping is removed, the url doesn't work any more.
115
+
Ancak tıklanabilir bir HTML linki bulunan önceki örnekte `URL.revokeObjectURL(link.href)` metodunu çağırmadık çünkü bu durum blob'u geçersiz kılacaktı. Kaldırmanın ardından adreslemenin silinmesiyle URL bir daha çalışmayacaktı.
116
116
117
-
## Blob to base64
117
+
## Blob'tan base64'e
118
118
119
-
An alternative to `URL.createObjectURL` is to convert a blob into a base64-encoded string.
119
+
`URL.createObjectURL`'a bir alternatif de blob'u base64 olarak kodlanmış bir karakter dizisine dönüştürmek.
120
120
121
-
That encoding represents binary data as a string of ultra-safe "readable" characters with ASCII-codes from 0 to 64. And what's more important -- we can use this encoding in "data-urls".
121
+
Bu kodlama, ikili veriyi oldukça güvenilir şekilde 0'dan 64'e ASCII kodlarından oluşan "okunabilir" karakterlerle temsil eder ve daha da önemlisi bu kodlamayı "veri URL'leri" içinde kullanabiliriz.
122
122
123
-
A [data url](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)has the form `data:[<mediatype>][;base64],<data>`. We can use such urls everywhere, on par with "regular" urls.
123
+
Bir [veri URL'i](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs)`data:[<mediatype>][;base64],<data>` formundadır. Bu tür URL'leri sıradan URL'lerle birebir aynı şekilde her yerde kullanabiliriz.
The browser will decode the string and show the image: <imgsrc="data:image/png;base64,R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7">
131
+
Tarayıcı bu karakter dizisini çözecek ve resmi gösterecek: <imgsrc="data:image/png;base64,R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7">
132
132
133
133
134
-
To transform a blob into base64, we'll use the built-in `FileReader`object. It can read data from Blobs in multiple formats. In the [next chapter](info:file)we'll cover it more in-depth.
134
+
Blob'u base64'e çevirmek için `FileReader`yerleşik objesini kullanacağız. Bu, blob'lardan birçok formatta veri okuyabilmekte. [bir sonraki bölümde](info:file)bunu daha derinlemesine ele alacağız.
135
135
136
-
Here's the demo of downloading a blob, now via base-64:
136
+
Aşağıdaki bir blob indirmenin bu defa base64 ile olan bir demosu:
137
137
138
138
```js run
139
139
let link =document.createElement('a');
140
-
link.download='hello.txt';
140
+
link.download='merhaba.txt';
141
141
142
-
let blob =newBlob(['Hello, world!'], {type:'text/plain'});
142
+
let blob =newBlob(['Merhaba Dünya'], {type:'text/plain'});
143
143
144
144
*!*
145
145
let reader =newFileReader();
146
-
reader.readAsDataURL(blob); //converts the blob to base64 and calls onload
146
+
reader.readAsDataURL(blob); // blob'u base64'e çevirir ve onload'ı çağırır
147
147
*/!*
148
148
149
149
reader.onload=function() {
150
-
link.href=reader.result; //data url
150
+
link.href=reader.result; //veri URL'i
151
151
link.click();
152
152
};
153
153
```
154
154
155
-
Both ways of making an URL of a blob are usable. But usually `URL.createObjectURL(blob)`is simpler and faster.
155
+
Bir blob oluşturmanın bu iki yolu da kullanılabilir ancak genellikle `URL.createObjectURL(blob)`daha basit ve hızlıdır.
156
156
157
-
```compare title-plus="URL.createObjectURL(blob)" title-minus="Blob to data url"
158
-
+ We need to revoke them if care about memory.
159
-
+ Direct access to blob, no "encoding/decoding"
160
-
- No need to revoke anything.
161
-
- Performance and memory losses on big blobs for encoding.
157
+
```compare title-plus="URL.createObjectURL(blob)" title-minus="Blob'tan veri URL'i"
158
+
+ Hafızaya önem veriyorsak kaldırmamız gerekiyor..
159
+
+ Blob'a doğrudan erişim. "Kodlama/çözme" yok.
160
+
- Herhangi bir şey kaldırmamız gerekmiyor.
161
+
- Performans ve hafıza büyük blob'ların kodlanması için harcanır.
162
162
```
163
163
164
-
## Image to blob
164
+
## Resim'den blob'a
165
165
166
-
We can create a blob of an image, an image part, or even make a page screenshot. That's handy to upload it somewhere.
166
+
Bir resmin blob'unu oluşturabiliriz, bir resim parçası olabilir veya sayfanın ekran görüntüsünü dahi oluşturabiliriz. Bir yerlere yükleme yapmak için oldukça kullanışlı.
167
167
168
-
Image operations are done via `<canvas>`element:
168
+
Resim işlemleri `<canvas>`öğesi aracılığıyla yapılır:
169
169
170
-
1.Draw an image (or its part) on canvas using [canvas.drawImage](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage).
171
-
2.Call canvas method [.toBlob(callback, format, quality)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob)that creates a blob and runs `callback` with it when done.
170
+
1.Canvas üzerinde [canvas.drawImage](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage) kullanarak bir resim çiz (veya bir parçasını).
171
+
2.Canvas'ın bir blob oluşturan ve tamamlandığında `callback`ini çalıştıran [.toBlob(callback, format, quality)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob)metodunu çağır.
172
172
173
-
In the example below, an image is just copied, but we could cut from it, or transform it on canvas prior to making a blob:
173
+
Aşağıdaki örnekte resim henüz kopyalanmış ancak bu durumda onu kesebiliriz veya bir blob oluşturmadan önce dönüştürebiliriz:
174
174
175
175
```js run
176
-
//take any image
176
+
//bir resim al
177
177
let img =document.querySelector('img');
178
178
179
-
//make <canvas> of the same size
179
+
//aynı boyutlarda <canvas> oluştur
180
180
let canvas =document.createElement('canvas');
181
181
canvas.width=img.clientWidth;
182
182
canvas.height=img.clientHeight;
183
183
184
184
let context =canvas.getContext('2d');
185
185
186
-
//copy image to it (this method allows to cut image)
186
+
//resmi içine kopyala (bu metot resmi kesmeye izin verir)
187
187
context.drawImage(img, 0, 0);
188
-
//we can context.rotate(), and do many other things on canvas
188
+
// context.rotate() yapabiliriz ve canvas üzerinde birçok başka işlemde bulunabiliriz
189
189
190
-
// toBlob is async opereation, callback is called when done
190
+
// toBlob asenkron bir işlem, tamamlandığında callback çağırılacak
191
191
canvas.toBlob(function(blob) {
192
-
// blob ready, download it
192
+
// blob hazır, indir
193
193
let link =document.createElement('a');
194
194
link.download='example.png';
195
195
196
196
link.href=URL.createObjectURL(blob);
197
197
link.click();
198
198
199
-
//delete the internal blob reference, to let the browser clear memory from it
199
+
//tarayıcının hafızadan temizleyebilmesi için iç blob referansını sil
200
200
URL.revokeObjectURL(link.href);
201
201
}, 'image/png');
202
202
```
@@ -208,14 +208,14 @@ let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'))
208
208
209
209
For screenshotting a page, we can use a library such as <https://github.com/niklasvh/html2canvas>. What it does is just walks the page and draws it on `<canvas>`. Then we can get a blob of it the same way as above.
210
210
211
-
## From Blob to ArrayBuffer
211
+
## Blob'tan ArrayBuffer'a
212
212
213
-
The `Blob`constructor allows to create a blob from almost anything, including any `BufferSource`.
213
+
`Blob`kurucu metodu, herhangi bir `BufferSource` içeren neredeyse her şeyden bir blob yaratabilmeye olanak sağlar.
214
214
215
-
But if we need to perform low-level processing, we can get the lowest-level`ArrayBuffer` from it using `FileReader`:
215
+
Yine de düşük seviye bir işleme ihtiyacımız varsa `FileReader`ı kullanarak en düşük seviyeli`ArrayBuffer`ı alabiliriz:
While `ArrayBuffer`, `Uint8Array`and other`BufferSource` are "binary data", a[Blob](https://www.w3.org/TR/FileAPI/#dfn-Blob)represents "binary data with type".
233
+
`ArrayBuffer`, `Uint8Array`ve diğer`BufferSource`lar "ikili veri"ler iken[Blob](https://www.w3.org/TR/FileAPI/#dfn-Blob)"tipi olan ikili veri"yi temsil eder.
234
234
235
-
That makes Blobs convenient for upload/download operations, that are so common in the browser.
235
+
Bu, Blob'ları tarayıcıda çok yaygın olan indirme/yükleme işlemleri için uygun hale getirir.
236
236
237
-
Methods that perform web-requests, such as [XMLHttpRequest](info:xmlhttprequest), [fetch](info:fetch-basics)and so on, can work with `Blob`natively, as well as with other binary types.
237
+
[XMLHttpRequest](info:xmlhttprequest), [fetch](info:fetch-basics)gibi web isteği gerçekleştiren metotlar, diğer ikili verilerle olduğu gibi `Blob`ile de doğal olarak çalışabilir.
238
238
239
-
We can easily convert betweeen `Blob` and low-level binary data types:
239
+
`Blob` ve düşük seviye ikili veri tiplerini kolayca birbiri arasında dönüştürebiliriz:
240
240
241
-
-We can make a Blob from a typed array using `new Blob(...)`constructor.
242
-
-We can get back `ArrayBuffer` from a Blob using `FileReader`, and then create a view over it for low-level binary processing.
241
+
-`new Blob(...)`kurucu metodunu kullanarak tipli bir diziden bir blob oluşturabiliriz.
242
+
-Blob'tan `ArrayBuffer`a `FileReader` kullanarak dönebiliriz ve ardından düşük seviye ikili veri işleme işlemleri için bir view oluşturabiliriz.
0 commit comments