{"id":33259,"date":"2025-10-31T18:41:44","date_gmt":"2025-10-31T15:41:44","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=33259"},"modified":"2025-10-31T18:41:44","modified_gmt":"2025-10-31T15:41:44","slug":"canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/","title":{"rendered":"Canvas API ile Olu\u015fturulan G\u00f6rselleri toBlob Kullanarak \u0130ndirme"},"content":{"rendered":"

<\/p>\n

Canvas API ile Olu\u015fturulan G\u00f6rselleri toBlob<\/code> Kullanarak \u0130ndirme<\/h2>\n

Giri\u015f<\/h2>\n

Web teknolojileri, dinamik ve etkile\u015fimli kullan\u0131c\u0131 deneyimleri sunma konusunda s\u00fcrekli olarak geli\u015fmektedir. Bu geli\u015fmelerin \u00f6nemli bir par\u00e7as\u0131 da, taray\u0131c\u0131 i\u00e7inde do\u011frudan g\u00f6rsel i\u015fleme ve olu\u015fturma yetene\u011fidir. HTML5 Canvas API, geli\u015ftiricilere piksel d\u00fczeyinde kontrol sa\u011flayarak grafikler, \u00e7izimler, oyunlar ve hatta karma\u015f\u0131k veri g\u00f6rselle\u015ftirmeleri olu\u015fturma imkan\u0131 sunar. Ancak, bu dinamik olarak olu\u015fturulan g\u00f6rsellerin kullan\u0131c\u0131lar taraf\u0131ndan yerel diske kaydedilmesi, yani indirilmesi, bir\u00e7ok uygulama senaryosu i\u00e7in kritik bir gereksinimdir.<\/p>\n

Geleneksel olarak, Canvas i\u00e7eri\u011fini indirmek i\u00e7in toDataURL()<\/code> metodu kullan\u0131lm\u0131\u015ft\u0131r. Bu metod, g\u00f6rsel verisini Base64 kodlu bir veri URL’si olarak d\u00f6nd\u00fcr\u00fcr. Ancak, b\u00fcy\u00fck g\u00f6rseller veya performans\u0131n kritik oldu\u011fu durumlarda toDataURL()<\/code> metodunun baz\u0131 dezavantajlar\u0131 bulunmaktad\u0131r. Bu dezavantajlar aras\u0131nda y\u00fcksek bellek t\u00fcketimi ve senkron \u00e7al\u0131\u015fma nedeniyle UI’\u0131 bloklama potansiyeli say\u0131labilir. \u0130\u015fte bu noktada HTMLCanvasElement.toBlob()<\/code> metodu devreye girer. toBlob()<\/code>, Canvas i\u00e7eri\u011fini do\u011frudan bir Blob<\/code> (Binary Large Object) nesnesine d\u00f6n\u00fc\u015ft\u00fcrerek, g\u00f6rsellerin daha verimli ve performansl\u0131 bir \u015fekilde i\u015flenmesini ve indirilmesini sa\u011flar.<\/p>\n

Bu makale, Canvas API ile olu\u015fturulan g\u00f6rsellerin toBlob()<\/code> metodu kullan\u0131larak nas\u0131l indirilece\u011fini detayl\u0131 bir \u015fekilde ele alacakt\u0131r. toBlob()<\/code> metodunun ne oldu\u011funu, neden tercih edilmesi gerekti\u011fini, nas\u0131l kullan\u0131laca\u011f\u0131n\u0131, ad\u0131m ad\u0131m bir uygulama \u00f6rne\u011fini ve bu s\u00fcre\u00e7teki \u00f6nemli ipu\u00e7lar\u0131n\u0131, performans optimizasyonlar\u0131n\u0131 ve hata y\u00f6netimini kapsaml\u0131 bir \u015fekilde inceleyece\u011fiz. Amac\u0131m\u0131z, web geli\u015ftiricilerine Canvas g\u00f6rsellerini g\u00fcvenli, h\u0131zl\u0131 ve kullan\u0131c\u0131 dostu bir \u015fekilde indirme konusunda pratik ve derinlemesine bir rehber sunmakt\u0131r.<\/p>\n

Canvas API’ye Giri\u015f<\/h2>\n

HTML5 Canvas API, web sayfalar\u0131nda dinamik grafikler \u00e7izmek i\u00e7in kullan\u0131lan g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bir <\/code> etiketi ile tan\u0131mlanan bir \u00e7izim alan\u0131 sa\u011flar ve JavaScript ile bu alan \u00fczerinde piksel d\u00fczeyinde kontrol imkan\u0131 sunar. Canvas, 2D grafikler i\u00e7in getContext('2d')<\/code> metodu ile bir \u00e7izim ba\u011flam\u0131 (rendering context) elde edilerek kullan\u0131l\u0131r. Bu ba\u011flam, \u00e7izgiler, \u015fekiller, metinler, g\u00f6r\u00fcnt\u00fcler ve di\u011fer grafik \u00f6\u011felerini \u00e7izmek i\u00e7in \u00e7e\u015fitli metodlar ve \u00f6zellikler i\u00e7erir.<\/p>\n

Canvas’\u0131n Temel Yap\u0131s\u0131 ve Kullan\u0131m\u0131<\/h3>\n

Bir Canvas elementi, HTML i\u00e7inde basit\u00e7e \u015fu \u015fekilde tan\u0131mlan\u0131r:<\/p>\n

<\/canvas><\/code><\/pre>\n
Bu etikete JavaScript’ten eri\u015fmek ve \u00e7izim yapmak i\u00e7in getContext('2d')<\/code> kullan\u0131l\u0131r:<\/p>\n
const canvas = document.getElementById('myCanvas');\nconst ctx = canvas.getContext('2d');\n\n\/\/ \u00d6rnek bir \u00e7izim: Dikd\u00f6rtgen\nctx.fillStyle = 'blue';\nctx.fillRect(50, 50, 150, 100);\n\n\/\/ \u00d6rnek bir \u00e7izim: \u00c7ember\nctx.beginPath();\nctx.arc(300, 100, 70, 0, Math.PI * 2, true);\nctx.fillStyle = 'red';\nctx.fill();\nctx.lineWidth = 3;\nctx.strokeStyle = 'black';\nctx.stroke();\n\n\/\/ \u00d6rnek bir \u00e7izim: Metin\nctx.font = '30px Arial';\nctx.fillStyle = 'green';\nctx.fillText('Merhaba Canvas!', 50, 250);<\/code><\/pre>\n
Bu \u00f6rnekler, Canvas’\u0131n temel \u00e7izim yeteneklerini g\u00f6stermektedir. Ancak Canvas’\u0131n g\u00fcc\u00fc, kullan\u0131c\u0131 etkile\u015fimine dayal\u0131 dinamik \u00e7izimler, ger\u00e7ek zamanl\u0131 grafik g\u00fcncellemeleri, resim manip\u00fclasyonu ve hatta karma\u015f\u0131k 3D grafikler (WebGL ile) olu\u015fturabilmesinde yatar. Web tabanl\u0131 g\u00f6rsel d\u00fczenleyiciler, veri g\u00f6rselle\u015ftirme ara\u00e7lar\u0131, oyunlar ve interaktif animasyonlar gibi bir\u00e7ok modern web uygulamas\u0131 Canvas’\u0131 yo\u011fun bir \u015fekilde kullan\u0131r.<\/p>\n
Canvas’\u0131n bu kadar yayg\u0131n kullan\u0131lmas\u0131n\u0131n temel nedenlerinden biri, istemci taraf\u0131nda (taray\u0131c\u0131da) g\u00f6rsel olu\u015fturma ve i\u015fleme yetene\u011fidir. Bu, sunucu y\u00fck\u00fcn\u00fc azalt\u0131r ve daha h\u0131zl\u0131, daha duyarl\u0131 uygulamalar sa\u011flar. Ancak, bu dinamik olarak olu\u015fturulan g\u00f6rsellerin kal\u0131c\u0131 hale getirilmesi, yani kullan\u0131c\u0131n\u0131n bilgisayar\u0131na indirilmesi gerekti\u011finde, do\u011fru ve verimli bir y\u00f6ntem se\u00e7mek b\u00fcy\u00fck \u00f6nem ta\u015f\u0131r.<\/p>\n
G\u00f6rsel Veri Formatlar\u0131 ve Web<\/h2>\n
Web \u00fczerinde g\u00f6rseller, \u00e7e\u015fitli formatlarda sunulur ve her bir format\u0131n kendine \u00f6zg\u00fc avantajlar\u0131 ve kullan\u0131m senaryolar\u0131 vard\u0131r. PNG, JPEG ve WebP, en yayg\u0131n kullan\u0131lan g\u00f6rsel formatlar\u0131d\u0131r. Canvas i\u00e7eri\u011fini indirme s\u00f6z konusu oldu\u011funda, bu formatlar\u0131n \u00f6zellikleri ve toBlob()<\/code> metodunun bunlarla nas\u0131l etkile\u015fimde bulundu\u011fu \u00f6nemlidir.<\/p>\n
Yayg\u0131n G\u00f6rsel Formatlar<\/h3>\n
*   PNG (Portable Network Graphics):<\/strong> Kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rma sunar ve \u015feffafl\u0131\u011f\u0131 (alfa kanal\u0131) destekler. \u00d6zellikle logolar, ikonlar ve \u015feffaf arka plan gerektiren grafikler i\u00e7in idealdir. Detaylar\u0131n korunmas\u0131 \u00f6nemlidir.
\n*   JPEG (Joint Photographic Experts Group):<\/strong> Kay\u0131pl\u0131 s\u0131k\u0131\u015ft\u0131rma kullan\u0131r, bu da dosya boyutunu \u00f6nemli \u00f6l\u00e7\u00fcde azalt\u0131rken g\u00f6rsel kalitesinde bir miktar kayba neden olabilir. \u00d6zellikle foto\u011fraflar ve karma\u015f\u0131k renk ge\u00e7i\u015fleri olan g\u00f6rseller i\u00e7in uygundur, \u00e7\u00fcnk\u00fc insan g\u00f6z\u00fc bu t\u00fcr g\u00f6rsellerdeki k\u00fc\u00e7\u00fck kay\u0131plar\u0131 fark etmekte zorlan\u0131r. Kalite seviyesi ayarlanabilir.
\n*   WebP:<\/strong> Hem kay\u0131pl\u0131 hem de kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rma sunan, Google taraf\u0131ndan geli\u015ftirilen modern bir g\u00f6rsel format\u0131d\u0131r. Genellikle JPEG ve PNG’ye g\u00f6re daha k\u00fc\u00e7\u00fck dosya boyutlar\u0131 ile benzer veya daha iyi g\u00f6rsel kalite sunar. \u015eeffafl\u0131\u011f\u0131 da destekler. Web performans\u0131n\u0131 art\u0131rmak i\u00e7in giderek daha fazla kullan\u0131lmaktad\u0131r.<\/p>\n
toDataURL()<\/code>: Eski Yakla\u015f\u0131m<\/h3>\n
Canvas i\u00e7eri\u011fini indirmek i\u00e7in uzun y\u0131llar boyunca canvas.toDataURL(type, encoderOptions)<\/code> metodu kullan\u0131lm\u0131\u015ft\u0131r. Bu metod, Canvas i\u00e7eri\u011fini belirtilen t\u00fcrde (\u00f6rne\u011fin image\/png<\/code> veya image\/jpeg<\/code>) Base64 kodlu bir veri URL’si olarak d\u00f6nd\u00fcr\u00fcr. Bu veri URL’si do\u011frudan bir <\/code> etiketinin src<\/code> \u00f6zniteli\u011fine atanabilir veya bir <\/code> etiketinin href<\/code> \u00f6zniteli\u011fi olarak kullan\u0131larak indirme i\u015flemi tetiklenebilir.<\/p>\n
\u00d6rnek toDataURL()<\/code> kullan\u0131m\u0131:<\/strong><\/p>\n
const dataURL = canvas.toDataURL('image\/png');\nconst link = document.createElement('a');\nlink.href = dataURL;\nlink.download = 'canvas-image.png';\ndocument.body.appendChild(link);\nlink.click();\ndocument.body.removeChild(link);<\/code><\/pre>\n
toDataURL()<\/code>‘\u00fcn avantaj\u0131, senkron olmas\u0131 ve hemen bir dize d\u00f6nd\u00fcrmesidir. Ancak, \u00f6zellikle b\u00fcy\u00fck Canvas’lar i\u00e7in ciddi dezavantajlar\u0131 vard\u0131r:
\n1.  Bellek T\u00fcketimi:<\/strong> Base64 kodlu bir dize, ham ikili veriden %33 daha b\u00fcy\u00fck bir boyuta sahiptir. Bu, b\u00fcy\u00fck g\u00f6rseller i\u00e7in gereksiz yere y\u00fcksek bellek t\u00fcketimine yol a\u00e7ar. Taray\u0131c\u0131 hem g\u00f6rselin piksel verisini, hem Base64 dizesini, hem de bu dizeyi tutan bir JavaScript de\u011fi\u015fkenini bellekte tutmak zorunda kal\u0131r.
\n2.  Performans:<\/strong> Dize olu\u015fturma ve i\u015fleme s\u00fcre\u00e7leri CPU yo\u011fun olabilir ve senkron \u00e7al\u0131\u015ft\u0131\u011f\u0131 i\u00e7in ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 (main thread) bloke ederek kullan\u0131c\u0131 aray\u00fcz\u00fcnde tak\u0131lmalara (jank) neden olabilir.
\n3.  B\u00fcy\u00fck Veri Boyutlar\u0131:<\/strong> Veri URL’leri genellikle URL uzunluk limitlerine tak\u0131labilir veya a\u011f \u00fczerinden g\u00f6nderilirken performans\u0131 d\u00fc\u015f\u00fcrebilir.<\/p>\n
Blob<\/code> Nesnesi ve \u00d6nemi<\/h3>\n
Bu dezavantajlar\u0131 a\u015fmak i\u00e7in Blob<\/code> (Binary Large Object) nesnesi geli\u015ftirilmi\u015ftir. Blob<\/code> nesneleri, okunabilir bir \u015fekilde olmayan, ham ikili verileri temsil eder. Blob<\/code>‘lar, dosyalar gibi ikili verileri do\u011frudan bellekte veya diskte daha verimli bir \u015fekilde depolamak ve i\u015flemek i\u00e7in tasarlanm\u0131\u015ft\u0131r. File<\/code> aray\u00fcz\u00fc asl\u0131nda Blob<\/code> aray\u00fcz\u00fcnden t\u00fcretilmi\u015ftir, yani bir File<\/code> nesnesi de bir Blob<\/code>‘dur.<\/p>\n
Blob<\/code>‘lar\u0131n toDataURL()<\/code>‘e g\u00f6re temel avantajlar\u0131 \u015funlard\u0131r:
\n*   Bellek Verimlili\u011fi:<\/strong> Blob<\/code>‘lar, veriyi do\u011frudan ikili formatta tutar, bu da Base64 dizesine g\u00f6re %33 daha az bellek kullan\u0131r.
\n*   Asenkron \u0130\u015flem:<\/strong> toBlob()<\/code> metodu asenkrondur, yani ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 bloke etmez. Bu, kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn duyarl\u0131 kalmas\u0131n\u0131 sa\u011flar.
\n*   Do\u011frudan \u0130\u015fleme:<\/strong> Blob<\/code>‘lar, URL.createObjectURL()<\/code> metodu ile kolayca bir URL’ye d\u00f6n\u00fc\u015ft\u00fcr\u00fclebilir ve bu URL, taray\u0131c\u0131da bir dosya gibi i\u015flenebilir (\u00f6rne\u011fin indirme i\u015flemi i\u00e7in).
\n*   API Entegrasyonu:<\/strong> Blob<\/code>‘lar, FileReader<\/code>, XMLHttpRequest<\/code>, fetch<\/code> API ve Worker<\/code>‘lar gibi di\u011fer web API’leriyle sorunsuz bir \u015fekilde entegre olur, bu da daha karma\u015f\u0131k veri i\u015fleme senaryolar\u0131na olanak tan\u0131r.<\/p>\n
Bu nedenlerle, Canvas i\u00e7eri\u011fini indirme veya ba\u015fka bir \u015fekilde i\u015fleme ihtiyac\u0131 duyuldu\u011funda toBlob()<\/code> metodunu kullanmak, modern web geli\u015ftirme uygulamalar\u0131nda tercih edilen ve daha performansl\u0131 bir yakla\u015f\u0131md\u0131r.<\/p>\n
HTMLCanvasElement.toBlob()<\/code> Metoduna Derinlemesine Bak\u0131\u015f<\/h2>\n
HTMLCanvasElement.toBlob()<\/code> metodu, Canvas i\u00e7eri\u011fini bir Blob<\/code> nesnesine d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in tasarlanm\u0131\u015ft\u0131r. Bu metodun asenkron do\u011fas\u0131 ve Blob<\/code> nesnelerinin bellek verimlili\u011fi, onu dinamik olarak olu\u015fturulan g\u00f6rselleri i\u015flemek i\u00e7in ideal bir se\u00e7enek haline getirir.<\/p>\n
Metodun Tan\u0131m\u0131 ve Amac\u0131<\/h3>\n
toBlob()<\/code> metodu, Canvas’\u0131n mevcut i\u00e7eri\u011finin anl\u0131k g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc al\u0131r ve bu anl\u0131k g\u00f6r\u00fcnt\u00fcy\u00fc belirtilen g\u00f6rsel format\u0131nda bir Blob<\/code> nesnesi olarak haz\u0131rlar. Metodun imzas\u0131 a\u015fa\u011f\u0131daki gibidir:<\/p>\n
canvas.toBlob(callback, type, encoderOptions);<\/code><\/pre>\n
*   callback<\/code> (Zorunlu):<\/strong> Blob<\/code> nesnesi olu\u015fturulduktan sonra \u00e7a\u011fr\u0131lacak bir fonksiyondur. Bu fonksiyon, olu\u015fturulan Blob<\/code> nesnesini tek arg\u00fcman olarak al\u0131r. E\u011fer Blob<\/code> olu\u015fturma i\u015flemi bir nedenle ba\u015far\u0131s\u0131z olursa (\u00f6rne\u011fin, g\u00fcvenlik ihlali), callback<\/code> fonksiyonuna null<\/code> de\u011feri g\u00f6nderilir. Metodun asenkron olmas\u0131n\u0131n nedeni budur; Blob<\/code> olu\u015fturma i\u015flemi zaman alabilir ve bu s\u00fcre\u00e7 ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 bloklamamal\u0131d\u0131r.
\n*   type<\/code> (Opsiyonel):<\/strong> Olu\u015fturulacak g\u00f6rselin MIME t\u00fcr\u00fcn\u00fc belirten bir dizedir. Varsay\u0131lan de\u011fer image\/png<\/code>‘dir. Desteklenen di\u011fer yayg\u0131n t\u00fcrler image\/jpeg<\/code> ve image\/webp<\/code>‘dir.
\n*   encoderOptions<\/code> (Opsiyonel):<\/strong> type<\/code> image\/jpeg<\/code> veya image\/webp<\/code> oldu\u011funda, s\u0131k\u0131\u015ft\u0131rma kalitesini belirten bir say\u0131 (0 ile 1 aras\u0131nda). 0 en d\u00fc\u015f\u00fck kalite\/en k\u00fc\u00e7\u00fck dosya boyutu, 1 ise en y\u00fcksek kalite\/en b\u00fcy\u00fck dosya boyutudur. Varsay\u0131lan de\u011fer 0.92’dir. Bu se\u00e7enek, PNG gibi kay\u0131ps\u0131z formatlar i\u00e7in ge\u00e7erli de\u011fildir.<\/p>\n
\u00d6rnek toBlob()<\/code> \u00e7a\u011fr\u0131s\u0131:<\/strong><\/p>\n
canvas.toBlob(function(blob) {\n    if (blob) {\n        \/\/ Blob ba\u015far\u0131yla olu\u015fturuldu, burada i\u015flem yapabiliriz\n        console.log('Blob olu\u015fturuldu:', blob);\n    } else {\n        console.error('Blob olu\u015fturulamad\u0131.');\n    }\n}, 'image\/jpeg', 0.8); \/\/ JPEG format\u0131nda %80 kaliteyle Blob olu\u015ftur<\/code><\/pre>\n
Blob<\/code> Nesnesi Nedir?<\/h3>\n
Blob<\/code>, “Binary Large Object” (\u0130kili B\u00fcy\u00fck Nesne) kelimelerinin k\u0131saltmas\u0131d\u0131r ve genellikle bir dosya benzeri ikili veriyi temsil etmek i\u00e7in kullan\u0131l\u0131r. Web API’lerinde Blob<\/code> nesneleri, a\u011f \u00fczerinden al\u0131nan veya yerel olarak olu\u015fturulan ikili verileri (\u00f6rne\u011fin resimler, ses dosyalar\u0131, videolar) g\u00fcvenli ve verimli bir \u015fekilde i\u015flemek i\u00e7in temel bir yap\u0131 ta\u015f\u0131d\u0131r.<\/p>\n
Bir Blob<\/code> nesnesinin iki ana \u00f6zelli\u011fi vard\u0131r:
\n*   size<\/code>:<\/strong> Blob<\/code>‘un bayt cinsinden boyutunu belirtir.
\n*   type<\/code>:<\/strong> Blob<\/code>‘un MIME t\u00fcr\u00fcn\u00fc (\u00f6rne\u011fin image\/png<\/code>, text\/plain<\/code>) belirtir.<\/p>\n
Blob<\/code>‘lar do\u011frudan okunamaz, ancak FileReader<\/code> API’si ile okunabilir veya URL.createObjectURL()<\/code> metodu ile bir URL’ye d\u00f6n\u00fc\u015ft\u00fcr\u00fclebilirler. Bu URL’ler, taray\u0131c\u0131 taraf\u0131ndan do\u011frudan eri\u015filebilen ge\u00e7ici referanslard\u0131r ve genellikle bir dosya indirme ba\u011flant\u0131s\u0131 olu\u015fturmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n
Desteklenen G\u00f6rsel Formatlar\u0131 ve Se\u00e7enekler<\/h3>\n
toBlob()<\/code> metodu, type<\/code> parametresi arac\u0131l\u0131\u011f\u0131yla \u00e7e\u015fitli g\u00f6rsel formatlar\u0131n\u0131 destekler:<\/p>\n
*   image\/png<\/code> (Varsay\u0131lan):<\/strong> Kay\u0131ps\u0131z bir format oldu\u011fu i\u00e7in encoderOptions<\/code> parametresi bu format i\u00e7in ge\u00e7erli de\u011fildir. \u015eeffafl\u0131\u011f\u0131 destekler.
\n*   image\/jpeg<\/code>:<\/strong> Kay\u0131pl\u0131 bir formatt\u0131r. encoderOptions<\/code> ile s\u0131k\u0131\u015ft\u0131rma kalitesi (0-1 aras\u0131) ayarlanabilir. Kalite d\u00fc\u015ft\u00fck\u00e7e dosya boyutu k\u00fc\u00e7\u00fcl\u00fcr, ancak g\u00f6rsel detaylar kaybolabilir. \u015eeffafl\u0131\u011f\u0131 desteklemez; \u015feffaf pikseller genellikle siyaha veya beyaz bir renge d\u00f6n\u00fc\u015f\u00fcr.
\n*   image\/webp<\/code>:<\/strong> Hem kay\u0131pl\u0131 hem de kay\u0131ps\u0131z s\u0131k\u0131\u015ft\u0131rma sunan modern bir formatt\u0131r. encoderOptions<\/code> ile kalite ayar\u0131 yap\u0131labilir. \u015eeffafl\u0131\u011f\u0131 destekler. Genellikle JPEG ve PNG’ye g\u00f6re daha iyi s\u0131k\u0131\u015ft\u0131rma oranlar\u0131 sunar.<\/p>\n
G\u00f6rsel format se\u00e7imi, uygulaman\u0131n gereksinimlerine ba\u011fl\u0131d\u0131r:
\n*   \u015eeffafl\u0131k gerekiyorsa:<\/strong> image\/png<\/code> veya image\/webp<\/code> tercih edilmelidir.
\n*   Foto\u011fraf benzeri g\u00f6rseller ve k\u00fc\u00e7\u00fck dosya boyutu \u00f6ncelikliyse:<\/strong> image\/jpeg<\/code> veya image\/webp<\/code> tercih edilebilir. encoderOptions<\/code> ile kalite\/boyut dengesi ayarlanabilir.
\n*   En iyi s\u0131k\u0131\u015ft\u0131rma ve modern taray\u0131c\u0131 deste\u011fi isteniyorsa:<\/strong> image\/webp<\/code> ideal bir se\u00e7enektir.<\/p>\n
encoderOptions<\/code> kullan\u0131m\u0131, \u00f6zellikle image\/jpeg<\/code> ve image\/webp<\/code> i\u00e7in dosya boyutunu ve g\u00f6rsel kalitesini optimize etmek a\u00e7\u0131s\u0131ndan kritik \u00f6neme sahiptir. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n indirdi\u011fi g\u00f6rselin \u00e7ok b\u00fcy\u00fck olmamas\u0131 isteniyorsa, kalite de\u011feri d\u00fc\u015f\u00fcr\u00fclebilir.<\/p>\n
toBlob<\/code> Kullanarak G\u00f6rsel \u0130ndirme \u0130\u015flemi<\/h2>\n
Canvas API ile olu\u015fturulan bir g\u00f6rseli toBlob()<\/code> kullanarak indirme s\u00fcreci, birka\u00e7 basit ad\u0131mdan olu\u015fur. Bu ad\u0131mlar, Canvas i\u00e7eri\u011fini bir Blob<\/code>‘a d\u00f6n\u00fc\u015ft\u00fcrmeyi, bu Blob<\/code> i\u00e7in ge\u00e7ici bir URL olu\u015fturmay\u0131 ve ard\u0131ndan bu URL’yi kullanarak bir indirme i\u015flemi tetiklemeyi i\u00e7erir.<\/p>\n
Temel \u0130\u015f Ak\u0131\u015f\u0131<\/h3>\n
1.  Canvas’\u0131 Haz\u0131rla:<\/strong> HTML’de bir <\/code> elementi olu\u015ftur ve JavaScript ile ona eri\u015f.
\n2.  Canvas \u00dczerine \u00c7izim Yap:<\/strong> Canvas ba\u011flam\u0131n\u0131 kullanarak istedi\u011finiz grafikleri, metinleri veya g\u00f6rselleri \u00e7iz.
\n3.  toBlob()<\/code> Metodunu \u00c7a\u011f\u0131r:<\/strong> Canvas elementinin toBlob()<\/code> metodunu, bir geri arama fonksiyonu (callback) ve istenen g\u00f6rsel format\u0131 ile \u00e7a\u011f\u0131r.
\n4.  Geri Arama Fonksiyonunu \u0130\u015fle:<\/strong> toBlob()<\/code> metodunun asenkron olarak tamamlanmas\u0131n\u0131 bekle. Geri arama fonksiyonu, Blob<\/code> nesnesini veya hata durumunda null<\/code>‘\u0131 alacakt\u0131r.
\n5.  Ge\u00e7ici URL Olu\u015ftur:<\/strong> Blob<\/code> nesnesi ba\u015far\u0131yla olu\u015fturulduysa, URL.createObjectURL(blob)<\/code> metodunu kullanarak bu Blob<\/code> i\u00e7in ge\u00e7ici bir URL olu\u015ftur. Bu URL, taray\u0131c\u0131n\u0131n yerel kaynaklar\u0131na i\u015faret eder.
\n6.  \u0130ndirme Ba\u011flant\u0131s\u0131 Olu\u015ftur:<\/strong> Dinamik olarak bir <\/code> elementi olu\u015ftur.
\n7.  Ba\u011flant\u0131 \u00d6zelliklerini Ayarla:<\/strong>
\n    *   href<\/code> \u00f6zniteli\u011fini URL.createObjectURL()<\/code> ile olu\u015fturulan ge\u00e7ici URL’ye ayarla.
\n    *   download<\/code> \u00f6zniteli\u011fini, kullan\u0131c\u0131n\u0131n indirece\u011fi dosyan\u0131n ad\u0131n\u0131 belirtmek i\u00e7in ayarla (\u00f6rne\u011fin my-canvas-image.png<\/code>). Bu \u00f6znitelik, taray\u0131c\u0131ya ba\u011flant\u0131n\u0131n bir dosya indirme i\u015flemi tetiklemesi gerekti\u011fini s\u00f6yler.
\n8.  \u0130ndirme \u0130\u015flemini Ba\u015flat:<\/strong> Olu\u015fturulan <\/code> elementini DOM’a ekle (iste\u011fe ba\u011fl\u0131, ancak baz\u0131 taray\u0131c\u0131lar i\u00e7in gerekli olabilir) ve ard\u0131ndan link.click()<\/code> metodunu \u00e7a\u011f\u0131rarak programatik olarak t\u0131klama olay\u0131n\u0131 tetikle.
\n9.  Belle\u011fi Temizle:<\/strong> \u0130ndirme i\u015flemi ba\u015flad\u0131ktan veya tamamland\u0131ktan sonra, URL.revokeObjectURL(url)<\/code> metodunu \u00e7a\u011f\u0131rarak olu\u015fturulan ge\u00e7ici URL’yi serbest b\u0131rak. Bu, taray\u0131c\u0131n\u0131n belle\u011fini temizlemek ve kaynak s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in \u00f6nemlidir.<\/p>\n
Ad\u0131m Ad\u0131m Uygulama \u00d6rne\u011fi<\/h3>\n
A\u015fa\u011f\u0131daki \u00f6rnek, basit bir Canvas \u00e7izimi olu\u015fturur ve bir d\u00fc\u011fmeye t\u0131klanarak bu \u00e7izimin PNG format\u0131nda indirilmesini sa\u011flar.<\/p>\n
HTML Yap\u0131s\u0131:<\/strong><\/p>\n
\n\n\n    \n    \n    Canvas G\u00f6rselini \u0130ndirme<\/title>\n    <style>\n        body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; margin-top: 50px; }\n        canvas { border: 2px solid #ccc; background-color: #f9f9f9; }\n        button { margin-top: 20px; padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: #007bff; color: white; border: none; border-radius: 5px; }\n        button:hover { background-color: #0056b3; }\n    <\/style>\n<\/head>\n<body>\n    <h2>Canvas API ile Olu\u015fturulan G\u00f6rseli \u0130ndirme \u00d6rne\u011fi<\/h2>\n    <canvas id=\"myDrawingCanvas\" width=\"600\" height=\"400\"><\/canvas>\n    <button id=\"downloadButton\">G\u00f6rseli \u0130ndir (PNG)<\/button>\n    <script src=\"app.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<p><strong>JavaScript Kodu (<code>app.js<\/code>):<\/strong><\/p>\n<pre><code class=\"language-javascript\">document.addEventListener('DOMContentLoaded', () => {\n    const canvas = document.getElementById('myDrawingCanvas');\n    const ctx = canvas.getContext('2d');\n    const downloadButton = document.getElementById('downloadButton');\n\n    \/\/ 1. Canvas \u00fczerine bir \u015feyler \u00e7izelim\n    function drawOnCanvas() {\n        ctx.clearRect(0, 0, canvas.width, canvas.height); \/\/ Canvas'\u0131 temizle\n\n        \/\/ Arka plan\n        ctx.fillStyle = '#ADD8E6'; \/\/ A\u00e7\u0131k mavi\n        ctx.fillRect(0, 0, canvas.width, canvas.height);\n\n        \/\/ Bir dikd\u00f6rtgen \u00e7iz\n        ctx.fillStyle = 'purple';\n        ctx.fillRect(50, 50, 100, 75);\n\n        \/\/ Bir daire \u00e7iz\n        ctx.beginPath();\n        ctx.arc(250, 100, 60, 0, Math.PI * 2, false);\n        ctx.fillStyle = 'orange';\n        ctx.fill();\n        ctx.lineWidth = 4;\n        ctx.strokeStyle = '#333';\n        ctx.stroke();\n\n        \/\/ Bir metin yaz\n        ctx.font = '40px Impact';\n        ctx.fillStyle = 'white';\n        ctx.textAlign = 'center';\n        ctx.textBaseline = 'middle';\n        ctx.fillText('Canvas \u0130ndirme', canvas.width \/ 2, canvas.height \/ 2);\n\n        \/\/ Bir \u00e7izgi \u00e7iz\n        ctx.beginPath();\n        ctx.moveTo(50, 300);\n        ctx.lineTo(550, 300);\n        ctx.lineWidth = 5;\n        ctx.strokeStyle = 'green';\n        ctx.stroke();\n\n        \/\/ Daha karma\u015f\u0131k bir \u015fekil: y\u0131ld\u0131z\n        drawStar(ctx, 450, 100, 5, 30, 15); \/\/ x, y, spikes, outerRadius, innerRadius\n\n        ctx.font = '20px Arial';\n        ctx.fillStyle = '#333';\n        ctx.fillText('toBlob() ile indirilebilir!', canvas.width \/ 2, canvas.height - 50);\n    }\n\n    \/\/ Yard\u0131mc\u0131 fonksiyon: Y\u0131ld\u0131z \u00e7izimi\n    function drawStar(ctx, cx, cy, spikes, outerRadius, innerRadius) {\n        let rot = Math.PI \/ 2 * 3;\n        let x = cx;\n        let y = cy;\n        let step = Math.PI \/ spikes;\n\n        ctx.beginPath();\n        ctx.moveTo(cx, cy - outerRadius);\n        for (let i = 0; i < spikes; i++) {\n            x = cx + Math.cos(rot) * outerRadius;\n            y = cy + Math.sin(rot) * outerRadius;\n            ctx.lineTo(x, y);\n            rot += step;\n\n            x = cx + Math.cos(rot) * innerRadius;\n            y = cy + Math.sin(rot) * innerRadius;\n            ctx.lineTo(x, y);\n            rot += step;\n        }\n        ctx.closePath();\n        ctx.fillStyle = 'yellow';\n        ctx.fill();\n        ctx.strokeStyle = 'gold';\n        ctx.lineWidth = 2;\n        ctx.stroke();\n    }\n\n    drawOnCanvas(); \/\/ Canvas'\u0131 ilk ba\u015fta \u00e7iz\n\n    \/\/ 2. \u0130ndirme d\u00fc\u011fmesine olay dinleyicisi ekle\n    downloadButton.addEventListener('click', () => {\n        \/\/ 3. toBlob() metodunu \u00e7a\u011f\u0131r\n        canvas.toBlob((blob) => {\n            \/\/ Geri arama fonksiyonu: Blob olu\u015fturuldu\u011funda \u00e7al\u0131\u015f\u0131r\n            if (blob) {\n                \/\/ 4. Ge\u00e7ici bir URL olu\u015ftur\n                const url = URL.createObjectURL(blob);\n\n                \/\/ 5. Dinamik bir <a> elementi olu\u015ftur\n                const link = document.createElement('a');\n\n                \/\/ 6. Ba\u011flant\u0131 \u00f6zelliklerini ayarla\n                link.href = url;\n                link.download = 'canvas-gorseli.png'; \/\/ \u0130ndirilecek dosyan\u0131n ad\u0131\n\n                \/\/ 7. \u0130ndirme i\u015flemini tetikle\n                document.body.appendChild(link); \/\/ Baz\u0131 taray\u0131c\u0131lar i\u00e7in DOM'a eklemek gerekebilir\n                link.click();\n                document.body.removeChild(link); \/\/ Ba\u011flant\u0131y\u0131 DOM'dan kald\u0131r\n\n                \/\/ 8. Ge\u00e7ici URL'yi serbest b\u0131rak (bellek temizli\u011fi i\u00e7in)\n                URL.revokeObjectURL(url);\n            } else {\n                console.error('G\u00f6rseli Blob olarak d\u00f6n\u00fc\u015ft\u00fcrme ba\u015far\u0131s\u0131z oldu.');\n                alert('G\u00f6rsel indirilemedi. Taray\u0131c\u0131 deste\u011fi veya g\u00fcvenlik k\u0131s\u0131tlamalar\u0131 olabilir.');\n            }\n        }, 'image\/png', 1); \/\/ PNG format\u0131nda, tam kalite (PNG i\u00e7in kalite parametresi asl\u0131nda etkisizdir)\n    });\n});<\/code><\/pre>\n<p>Bu \u00f6rnek kod, Canvas \u00fczerine \u00e7e\u015fitli \u015fekiller ve metinler \u00e7izdikten sonra, “G\u00f6rseli \u0130ndir” d\u00fc\u011fmesine t\u0131kland\u0131\u011f\u0131nda <code>toBlob()<\/code> metodunu kullanarak bu i\u00e7eri\u011fi bir PNG dosyas\u0131 olarak indirir. <code>URL.createObjectURL()<\/code> ve <code>URL.revokeObjectURL()<\/code> kullan\u0131m\u0131, bellek y\u00f6netiminin ne kadar \u00f6nemli oldu\u011funu g\u00f6stermektedir.<\/p>\n<h3>Hata Y\u00f6netimi<\/h3>\n<p><code>toBlob()<\/code> metodunun geri arama fonksiyonuna <code>null<\/code> bir <code>Blob<\/code> nesnesi g\u00f6ndermesi, genellikle g\u00fcvenlik k\u0131s\u0131tlamalar\u0131ndan kaynaklan\u0131r. \u00d6rne\u011fin, Canvas \u00fczerine farkl\u0131 bir kaynaktan (cross-origin) y\u00fcklenmi\u015f bir g\u00f6rsel \u00e7izildi\u011finde ve Canvas “tainted” (kirletilmi\u015f) hale geldi\u011finde, g\u00fcvenlik nedeniyle <code>toBlob()<\/code> (ve <code>toDataURL()<\/code>) metodlar\u0131 ba\u015far\u0131s\u0131z olur. Bu durum, kullan\u0131c\u0131n\u0131n izni olmadan farkl\u0131 bir web sitesinden al\u0131nan g\u00f6rsellerin okunmas\u0131n\u0131 engellemek i\u00e7indir. Bu t\u00fcr durumlar\u0131 ele almak i\u00e7in geri arama i\u00e7inde <code>if (blob)<\/code> kontrol\u00fc yapmak \u00f6nemlidir.<\/p>\n<h2>Geli\u015fmi\u015f Konular ve En \u0130yi Uygulamalar<\/h2>\n<p><code>toBlob()<\/code> metodunu kullan\u0131rken performans, g\u00fcvenlik ve kullan\u0131c\u0131 deneyimi gibi fakt\u00f6rleri g\u00f6z \u00f6n\u00fcnde bulundurmak, daha sa\u011flam ve verimli uygulamalar geli\u015ftirmeye yard\u0131mc\u0131 olur.<\/p>\n<h3>Performans Optimizasyonu<\/h3>\n<p>*   <strong>Asenkron Yap\u0131:<\/strong> <code>toBlob()<\/code>‘un en b\u00fcy\u00fck avantaj\u0131 asenkron olmas\u0131d\u0131r. Bu, b\u00fcy\u00fck Canvas’lar i\u015flenirken bile ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131n bloke olmamas\u0131n\u0131 sa\u011flar ve kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn duyarl\u0131 kalmas\u0131na yard\u0131mc\u0131 olur. Yo\u011fun \u00e7izim i\u015flemleri ve ard\u0131ndan <code>toBlob()<\/code> \u00e7a\u011fr\u0131s\u0131 yaparken bu avantajdan faydalanmak i\u00e7in, indirme i\u015flemini ayr\u0131 bir olay i\u015fleyicisine ba\u011flamak en iyi yakla\u015f\u0131md\u0131r.<br \/>\n*   <strong>B\u00fcy\u00fck Canvas’lar ve Bellek:<\/strong> \u00c7ok b\u00fcy\u00fck boyutlu Canvas’lar (\u00f6rne\u011fin 4000×4000 piksel) \u00f6nemli miktarda bellek t\u00fcketebilir. Bu durum, \u00f6zellikle d\u00fc\u015f\u00fck kaynakl\u0131 cihazlarda veya \u00e7ok say\u0131da sekme a\u00e7\u0131kken performans sorunlar\u0131na yol a\u00e7abilir. M\u00fcmk\u00fcnse, kullan\u0131c\u0131n\u0131n indirmek istedi\u011fi g\u00f6rselin maksimum makul boyutunu s\u0131n\u0131rlamak veya indirme \u00f6ncesinde Canvas’\u0131 daha k\u00fc\u00e7\u00fck bir boyuta \u00f6l\u00e7eklendirmek d\u00fc\u015f\u00fcn\u00fclebilir.<br \/>\n*   <strong><code>OffscreenCanvas<\/code>:<\/strong> Daha da geli\u015fmi\u015f performans optimizasyonlar\u0131 i\u00e7in <code>OffscreenCanvas<\/code> kullan\u0131labilir. <code>OffscreenCanvas<\/code>, Canvas i\u015flemlerini ana i\u015f par\u00e7ac\u0131\u011f\u0131ndan ayr\u0131 bir <code>Worker<\/code> i\u015f par\u00e7ac\u0131\u011f\u0131na ta\u015f\u0131yarak UI’\u0131n tamamen engellenmeden kalmas\u0131n\u0131 sa\u011flar. <code>OffscreenCanvas<\/code> de <code>toBlob()<\/code> metodunu destekler, bu da onu yo\u011fun g\u00f6rsel i\u015fleme ve indirme senaryolar\u0131 i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7 yapar. Ancak, <code>OffscreenCanvas<\/code> kullan\u0131m\u0131 daha karma\u015f\u0131kt\u0131r ve taray\u0131c\u0131 deste\u011fi hen\u00fcz <code>HTMLCanvasElement<\/code> kadar yayg\u0131n de\u011fildir.<\/p>\n<h3>Hata Y\u00f6netimi<\/h3>\n<p>Yukar\u0131da belirtildi\u011fi gibi, <code>toBlob()<\/code> \u00e7a\u011fr\u0131s\u0131n\u0131n geri arama fonksiyonuna <code>null<\/code> bir <code>Blob<\/code> nesnesi gelmesi, genellikle g\u00fcvenlik k\u0131s\u0131tlamalar\u0131ndan kaynaklan\u0131r.<br \/>\n*   <strong>Cross-Origin (\u00c7apraz Kaynak) K\u0131s\u0131tlamalar\u0131:<\/strong> E\u011fer Canvas \u00fczerine farkl\u0131 bir etki alan\u0131ndan y\u00fcklenmi\u015f bir g\u00f6rsel \u00e7izilirse (\u00f6rne\u011fin, ba\u015fka bir sunucudan <code><img><\/code> etiketi ile y\u00fcklenen bir resim), Canvas “kirletilmi\u015f” (tainted) hale gelir. Kirletilmi\u015f bir Canvas’tan <code>toBlob()<\/code> veya <code>toDataURL()<\/code> metodlar\u0131n\u0131 \u00e7a\u011f\u0131rmak bir g\u00fcvenlik hatas\u0131na neden olur ve <code>null<\/code> bir <code>Blob<\/code> d\u00f6ner. Bu durumu a\u015fmak i\u00e7in, g\u00f6rsellerin ayn\u0131 etki alan\u0131ndan gelmesi veya <code>crossOrigin=\"anonymous\"<\/code> \u00f6zniteli\u011fi ile y\u00fcklenmesi ve sunucunun uygun CORS (Cross-Origin Resource Sharing) ba\u015fl\u0131klar\u0131n\u0131 g\u00f6ndermesi gerekir.<\/p>\n<pre><code class=\"language-html\"><img decoding=\"async\" src=\"https:\/\/example.com\/image.jpg\" crossOrigin=\"anonymous\"><\/code><\/pre>\n<p>    Sunucunun da <code>Access-Control-Allow-Origin: *<\/code> veya belirli bir domaini i\u00e7eren bir ba\u015fl\u0131k g\u00f6ndermesi gerekir.<br \/>\n*   <strong>Taray\u0131c\u0131 Deste\u011fi:<\/strong> <code>toBlob()<\/code> modern taray\u0131c\u0131lar taraf\u0131ndan geni\u015f \u00e7apta desteklenmektedir. Ancak \u00e7ok eski taray\u0131c\u0131larda desteklenmeyebilir. Bu durumda, yedek olarak <code>toDataURL()<\/code> kullanmak veya kullan\u0131c\u0131ya bir uyar\u0131 g\u00f6stermek d\u00fc\u015f\u00fcn\u00fclebilir.<\/p>\n<h3>Kullan\u0131c\u0131 Deneyimi \u0130yile\u015ftirmeleri<\/h3>\n<p>*   <strong>Y\u00fckleme G\u00f6stergesi:<\/strong> B\u00fcy\u00fck g\u00f6rsellerin <code>Blob<\/code>‘a d\u00f6n\u00fc\u015ft\u00fcr\u00fclmesi ve indirilmesi zaman alabilir. Bu s\u00fcre zarf\u0131nda kullan\u0131c\u0131ya bir y\u00fckleme g\u00f6stergesi (spinner veya ilerleme \u00e7ubu\u011fu) sunmak, uygulaman\u0131n donmad\u0131\u011f\u0131 hissini verir ve kullan\u0131c\u0131 deneyimini iyile\u015ftirir.<br \/>\n*   <strong>Otomatik Dosya Ad\u0131:<\/strong> <code>download<\/code> \u00f6zniteli\u011fi ile kullan\u0131c\u0131ya anlaml\u0131 bir dosya ad\u0131 sunmak \u00f6nemlidir. Tarih ve saat damgas\u0131 i\u00e7eren dinamik adlar (\u00f6rne\u011fin <code>canvas-image-20231027-1430.png<\/code>) birden fazla indirmede kar\u0131\u015f\u0131kl\u0131\u011f\u0131 \u00f6nleyebilir.<br \/>\n*   <strong>Ba\u015far\u0131\/Hata Bildirimleri:<\/strong> \u0130ndirme i\u015flemi ba\u015far\u0131yla tamamland\u0131\u011f\u0131nda veya bir hata olu\u015ftu\u011funda kullan\u0131c\u0131ya k\u0131sa bir bildirim (\u00f6rne\u011fin bir toast mesaj\u0131) g\u00f6stermek faydal\u0131 olabilir.<\/p>\n<h2><code>toDataURL<\/code> ile Kar\u015f\u0131la\u015ft\u0131rma<\/h2>\n<p><code>toBlob()<\/code> ve <code>toDataURL()<\/code> metodlar\u0131, Canvas i\u00e7eri\u011fini d\u0131\u015fa aktarmak i\u00e7in kullan\u0131l\u0131r, ancak farkl\u0131 senaryolar i\u00e7in optimize edilmi\u015flerdir. Aralar\u0131ndaki farklar\u0131 anlamak, do\u011fru metodu se\u00e7mek i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n<h3><code>toDataURL()<\/code> Ne Zaman Kullan\u0131lmal\u0131?<\/h3>\n<p>*   <strong>K\u00fc\u00e7\u00fck G\u00f6rseller:<\/strong> \u00c7ok k\u00fc\u00e7\u00fck boyutlu g\u00f6rseller i\u00e7in <code>toDataURL()<\/code>‘\u00fcn senkron do\u011fas\u0131 ve Base64 dizesi olu\u015fturma maliyeti g\u00f6z ard\u0131 edilebilir olabilir.<br \/>\n*   <strong>Do\u011frudan HTML\/CSS Entegrasyonu:<\/strong> G\u00f6rsel verisinin do\u011frudan HTML <code><img><\/code> etiketinin <code>src<\/code> \u00f6zniteli\u011fine, CSS <code>background-image<\/code> \u00f6zelli\u011fine veya bir JSON\/XML yap\u0131s\u0131na g\u00f6m\u00fclmesi gerekti\u011finde <code>toDataURL()<\/code> daha pratik olabilir.<br \/>\n*   <strong>Anl\u0131k G\u00f6r\u00fcnt\u00fcler:<\/strong> H\u0131zl\u0131 bir \u015fekilde Canvas’\u0131n anl\u0131k bir g\u00f6r\u00fcnt\u00fcs\u00fcn\u00fc al\u0131p, bir dize olarak i\u015flemek gerekti\u011finde.<\/p>\n<p><strong>Dezavantajlar\u0131:<\/strong><br \/>\n*   <strong>Y\u00fcksek Bellek T\u00fcketimi:<\/strong> Base64 kodlamas\u0131 nedeniyle orijinal ikili veriden %33 daha fazla bellek kullan\u0131r.<br \/>\n*   <strong>Performans Sorunlar\u0131:<\/strong> Senkron \u00e7al\u0131\u015ft\u0131\u011f\u0131 i\u00e7in b\u00fcy\u00fck g\u00f6rsellerde ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 bloke edebilir, UI’da tak\u0131lmalara yol a\u00e7abilir.<br \/>\n*   <strong>URL Uzunluk Limitleri:<\/strong> Taray\u0131c\u0131lar\u0131n URL uzunluk limitleri nedeniyle \u00e7ok b\u00fcy\u00fck Base64 dizeleri sorun yaratabilir.<\/p>\n<h3><code>toBlob()<\/code> Ne Zaman Kullan\u0131lmal\u0131?<\/h3>\n<p>*   <strong>B\u00fcy\u00fck G\u00f6rsellerin \u0130ndirilmesi:<\/strong> B\u00fcy\u00fck Canvas i\u00e7eriklerini kullan\u0131c\u0131n\u0131n bilgisayar\u0131na indirmek i\u00e7in <code>toBlob()<\/code> a\u00e7\u0131k ara daha iyi bir se\u00e7enektir. Bellek verimlili\u011fi ve asenkron do\u011fas\u0131, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirir.<br \/>\n*   <strong>Performans Odakl\u0131 Uygulamalar:<\/strong> Kullan\u0131c\u0131 aray\u00fcz\u00fcn\u00fcn duyarl\u0131 kalmas\u0131 gereken uygulamalarda, g\u00f6rsel d\u0131\u015fa aktarma i\u015flemleri i\u00e7in <code>toBlob()<\/code> tercih edilmelidir.<br \/>\n*   <strong>A\u011f \u00dczerinden Veri G\u00f6nderimi:<\/strong> Canvas i\u00e7eri\u011fini <code>fetch<\/code> API veya <code>XMLHttpRequest<\/code> kullanarak sunucuya g\u00f6ndermek gerekti\u011finde, do\u011frudan <code>Blob<\/code> nesnesini g\u00f6ndermek, Base64 dizelerini g\u00f6ndermekten daha verimli ve daha az i\u015flem g\u00fcc\u00fc gerektirir.<br \/>\n*   <strong>Di\u011fer API’lerle Entegrasyon:<\/strong> <code>File System API<\/code>, <code>IndexedDB<\/code> gibi <code>Blob<\/code> nesneleriyle do\u011frudan \u00e7al\u0131\u015fabilen di\u011fer API’lerle entegrasyon i\u00e7in <code>toBlob()<\/code> daha uygundur.<\/p>\n<p><strong>Avantajlar\u0131:<\/strong><br \/>\n*   <strong>Bellek Verimlili\u011fi:<\/strong> G\u00f6rsel veriyi do\u011frudan ikili formatta tutar, Base64 kodlamas\u0131na gerek kalmaz.<br \/>\n*   <strong>Asenkron \u0130\u015flem:<\/strong> Ana i\u015f par\u00e7ac\u0131\u011f\u0131n\u0131 bloke etmez, UI duyarl\u0131l\u0131\u011f\u0131n\u0131 korur.<br \/>\n*   <strong>Do\u011frudan \u0130ndirme:<\/strong> <code>URL.createObjectURL()<\/code> ile kolayca indirme ba\u011flant\u0131s\u0131 olu\u015fturulabilir.<br \/>\n*   <strong>Daha \u0130yi API Entegrasyonu:<\/strong> Di\u011fer modern web API’leri ile daha iyi uyum sa\u011flar.<\/p>\n<p>\u00d6zetle, modern web uygulamalar\u0131nda Canvas i\u00e7eri\u011fini indirme veya a\u011f \u00fczerinden g\u00f6nderme gibi ikili veri i\u015flemleri gerektiren \u00e7o\u011fu senaryo i\u00e7in <code>toBlob()<\/code> metodu, <code>toDataURL()<\/code>‘e g\u00f6re tercih edilmesi gereken daha \u00fcst\u00fcn bir \u00e7\u00f6z\u00fcmd\u00fcr. <code>toDataURL()<\/code> ise daha ni\u015f kullan\u0131m durumlar\u0131 i\u00e7in uygun kalm\u0131\u015ft\u0131r.<\/p>\n<h2>Taray\u0131c\u0131 Deste\u011fi ve Polifiller<\/h2>\n<p><code>HTMLCanvasElement.toBlob()<\/code> metodu, modern web taray\u0131c\u0131lar\u0131 taraf\u0131ndan olduk\u00e7a geni\u015f bir \u015fekilde desteklenmektedir. Bu, geli\u015ftiricilerin \u00e7o\u011fu durumda herhangi bir \u00f6zel polifil veya yedek mekanizma d\u00fc\u015f\u00fcnmeden bu metodu g\u00fcvenle kullanabilece\u011fi anlam\u0131na gelir.<\/p>\n<h3>Mevcut Taray\u0131c\u0131 Deste\u011fi<\/h3>\n<p><code>toBlob()<\/code> metodu, a\u015fa\u011f\u0131daki ana taray\u0131c\u0131lar ve motorlar\u0131 taraf\u0131ndan tam olarak desteklenmektedir:<br \/>\n*   <strong>Chrome:<\/strong> S\u00fcr\u00fcm 50’den itibaren (2016’dan beri)<br \/>\n*   <strong>Firefox:<\/strong> S\u00fcr\u00fcm 19’dan itibaren (2013’ten beri)<br \/>\n*   <strong>Safari:<\/strong> S\u00fcr\u00fcm 10’dan itibaren (2016’dan beri)<br \/>\n*   <strong>Edge:<\/strong> S\u00fcr\u00fcm 14’ten itibaren (2016’dan beri)<br \/>\n*   <strong>Opera:<\/strong> S\u00fcr\u00fcm 37’den itibaren (2016’dan beri)<\/p>\n<p>Bu yayg\u0131n destek, <code>toBlob()<\/code>‘un art\u0131k bir “yeni” \u00f6zellik olmaktan \u00e7\u0131k\u0131p, web platformunun standart bir par\u00e7as\u0131 haline geldi\u011fini g\u00f6stermektedir. Mobil taray\u0131c\u0131lar da genellikle bu deste\u011fi masa\u00fcst\u00fc kar\u015f\u0131l\u0131klar\u0131yla paralel olarak sunmaktad\u0131r.<\/p>\n<h3>Polifiller ve Yedek \u00c7\u00f6z\u00fcmler<\/h3>\n<p><code>toBlob()<\/code>‘un bu kadar geni\u015f deste\u011fi g\u00f6z \u00f6n\u00fcne al\u0131nd\u0131\u011f\u0131nda, \u00e7o\u011fu proje i\u00e7in \u00f6zel bir polifile ihtiya\u00e7 duyulmaz. Ancak, \u00e7ok eski taray\u0131c\u0131lar\u0131 (\u00f6rne\u011fin, Internet Explorer 11 veya daha eskisi) desteklemesi gereken \u00f6zel durumlar i\u00e7in baz\u0131 yedek \u00e7\u00f6z\u00fcmler d\u00fc\u015f\u00fcn\u00fclebilir:<\/p>\n<p>1.  <strong><code>toDataURL()<\/code> Fallback:<\/strong> <code>toBlob()<\/code> desteklenmiyorsa, <code>toDataURL()<\/code>‘\u00fc kullanarak Base64 dizesini elde edebilir ve bu dizeyi bir <code>Blob<\/code>‘a d\u00f6n\u00fc\u015ft\u00fcrmeyi deneyebilirsiniz. Bu, <code>dataURLtoBlob<\/code> gibi yard\u0131mc\u0131 fonksiyonlarla yap\u0131labilir:<\/p>\n<pre><code class=\"language-javascript\">if (!canvas.toBlob) {\n        \/\/ toBlob desteklenmiyorsa toDataURL kullan\n        const dataURL = canvas.toDataURL('image\/png');\n        \/\/ dataURL'yi bir Blob'a d\u00f6n\u00fc\u015ft\u00fcrme mant\u0131\u011f\u0131 burada olur\n        \/\/ Bu genellikle Base64 dizesini parse edip bir ArrayBuffer'a d\u00f6n\u00fc\u015ft\u00fcrmeyi i\u00e7erir.\n        \/\/ Bu i\u015flem de CPU yo\u011fun olabilir ve toBlob'un asenkron avantaj\u0131n\u0131 sa\u011flamaz.\n    }<\/code><\/pre>\n<p>    Bu yakla\u015f\u0131m, \u00f6zellikle b\u00fcy\u00fck g\u00f6rseller i\u00e7in <code>toDataURL()<\/code>‘\u00fcn bellek ve performans dezavantajlar\u0131n\u0131 ta\u015f\u0131r, ancak uyumluluk gerektiren durumlarda bir se\u00e7enek olabilir.<\/p>\n<p>2.  <strong>Kullan\u0131c\u0131ya Bilgi Verme:<\/strong> Uygulaman\u0131z\u0131n temel i\u015flevselli\u011fi Canvas g\u00f6rseli indirmeye dayan\u0131yorsa ve eski taray\u0131c\u0131 deste\u011fi kritik de\u011filse, kullan\u0131c\u0131ya taray\u0131c\u0131s\u0131n\u0131 g\u00fcncellemesini \u00f6neren bir mesaj g\u00f6stermek daha basit bir \u00e7\u00f6z\u00fcm olabilir.<\/p>\n<p>\u00c7o\u011fu modern web uygulamas\u0131 i\u00e7in, <code>toBlob()<\/code>‘un do\u011frudan kullan\u0131lmas\u0131 yeterlidir ve ek uyumluluk katmanlar\u0131na gerek kalmaz. Taray\u0131c\u0131 deste\u011fini kontrol etmek i\u00e7in <code>if (canvas.toBlob)<\/code> gibi basit bir kontrol yeterli olacakt\u0131r, ancak g\u00fcn\u00fcm\u00fczdeki taray\u0131c\u0131 pazar pay\u0131 d\u00fc\u015f\u00fcn\u00fcld\u00fc\u011f\u00fcnde bu kontrol bile \u00e7o\u011fu zaman gereksizdir.<\/p>\n<h2>Sonu\u00e7<\/h2>\n<p>HTML5 Canvas API, web \u00fczerinde dinamik ve etkile\u015fimli g\u00f6rsel i\u00e7erik olu\u015fturma konusunda devrim niteli\u011finde yetenekler sunar. Bu g\u00f6rsellerin kullan\u0131c\u0131n\u0131n cihaz\u0131na indirilmesi gerekti\u011finde ise, <code>HTMLCanvasElement.toBlob()<\/code> metodu modern web geli\u015ftiricileri i\u00e7in en verimli ve performansl\u0131 \u00e7\u00f6z\u00fcm\u00fc sa\u011flamaktad\u0131r.<\/p>\n<p>Bu makalede, Canvas API’nin temellerinden ba\u015flayarak, g\u00f6rsel veri formatlar\u0131n\u0131n web \u00fczerindeki rol\u00fcne ve <code>toBlob()<\/code> metodunun neden <code>toDataURL()<\/code>‘e g\u00f6re \u00fcst\u00fcn bir se\u00e7enek oldu\u011funa dair derinlemesine bir inceleme yapt\u0131k. <code>toBlob()<\/code>‘un asenkron do\u011fas\u0131, bellek verimlili\u011fi ve <code>Blob<\/code> nesnelerinin di\u011fer web API’leriyle entegrasyon yetene\u011fi, onu b\u00fcy\u00fck veya performans\u0131n kritik oldu\u011fu g\u00f6rsel indirme senaryolar\u0131 i\u00e7in vazge\u00e7ilmez k\u0131lmaktad\u0131r.<\/p>\n<p>Ad\u0131m ad\u0131m uygulama \u00f6rne\u011fi ile <code>toBlob()<\/code> kullanarak Canvas g\u00f6rselini indirme s\u00fcrecini pratik olarak g\u00f6sterdik. Bu s\u00fcre\u00e7te, ge\u00e7ici URL’lerin (<code>URL.createObjectURL()<\/code>) olu\u015fturulmas\u0131, indirme ba\u011flant\u0131s\u0131n\u0131n (<code><a><\/code> etiketi ve <code>download<\/code> \u00f6zniteli\u011fi) ayarlanmas\u0131 ve bellek y\u00f6netimi i\u00e7in URL’lerin serbest b\u0131rak\u0131lmas\u0131 (<code>URL.revokeObjectURL()<\/code>) gibi \u00f6nemli ad\u0131mlar\u0131 vurgulad\u0131k.<\/p>\n<p>Ayr\u0131ca, \u00e7apraz kaynak (CORS) k\u0131s\u0131tlamalar\u0131, bellek optimizasyonlar\u0131 ve <code>OffscreenCanvas<\/code> gibi geli\u015fmi\u015f konulara de\u011finerek, daha sa\u011flam ve kullan\u0131c\u0131 dostu uygulamalar geli\u015ftirmek i\u00e7in en iyi uygulamalar\u0131 ele ald\u0131k. Modern taray\u0131c\u0131lar\u0131n geni\u015f <code>toBlob()<\/code> deste\u011fi sayesinde, geli\u015ftiriciler bu g\u00fc\u00e7l\u00fc metodu g\u00fcvenle kullanabilir ve kullan\u0131c\u0131lar\u0131na sorunsuz bir g\u00f6rsel indirme deneyimi sunabilirler.<\/p>\n<p>\u00d6zetle, Canvas API ile dinamik olarak olu\u015fturulan g\u00f6rselleri indirme ihtiyac\u0131 duydu\u011funuzda, <code>toBlob()<\/code> metodu, performans, bellek verimlili\u011fi ve kullan\u0131c\u0131 deneyimi a\u00e7\u0131s\u0131ndan en iyi tercihtir. Bu metodun sundu\u011fu esneklik ve verimlilik, web uygulamalar\u0131n\u0131z\u0131n yeteneklerini bir \u00fcst seviyeye ta\u015f\u0131yacakt\u0131r.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Canvas API ile Olu\u015fturulan G\u00f6rselleri toBlob Kullanarak \u0130ndirme\nGiri\u015f\nWeb teknolojileri, dinamik ve etkile\u015fimli kullan\u0131c\u0131 deneyimleri sunma ko","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-33259","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Canvas API ile Olu\u015fturulan G\u00f6rselleri toBlob Kullanarak \u0130ndirme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Canvas API ile Olu\u015fturulan G\u00f6rselleri toBlob Kullanarak \u0130ndirme\" \/>\n<meta property=\"og:description\" content=\"Canvas API ile Olu\u015fturulan G\u00f6rselleri toBlob Kullanarak \u0130ndirme Giri\u015f Web teknolojileri, dinamik ve etkile\u015fimli kullan\u0131c\u0131 deneyimleri sunma ko\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-31T15:41:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/example.com\/image.jpg\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Canvas API ile Olu\u015fturulan G\u00f6rselleri toBlob Kullanarak \u0130ndirme\",\"datePublished\":\"2025-10-31T15:41:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/\"},\"wordCount\":3930,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"image\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/example.com\/image.jpg\",\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/\",\"name\":\"Canvas API ile Olu\u015fturulan G\u00f6rselleri toBlob Kullanarak \u0130ndirme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/example.com\/image.jpg\",\"datePublished\":\"2025-10-31T15:41:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/#primaryimage\",\"url\":\"https:\/\/example.com\/image.jpg\",\"contentUrl\":\"https:\/\/example.com\/image.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Canvas API ile Olu\u015fturulan G\u00f6rselleri toBlob Kullanarak \u0130ndirme\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Canvas API ile Olu\u015fturulan G\u00f6rselleri toBlob Kullanarak \u0130ndirme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/","og_locale":"tr_TR","og_type":"article","og_title":"Canvas API ile Olu\u015fturulan G\u00f6rselleri toBlob Kullanarak \u0130ndirme","og_description":"Canvas API ile Olu\u015fturulan G\u00f6rselleri toBlob Kullanarak \u0130ndirme Giri\u015f Web teknolojileri, dinamik ve etkile\u015fimli kullan\u0131c\u0131 deneyimleri sunma ko","og_url":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-31T15:41:44+00:00","og_image":[{"url":"https:\/\/example.com\/image.jpg","type":"","width":"","height":""}],"author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"24 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Canvas API ile Olu\u015fturulan G\u00f6rselleri toBlob Kullanarak \u0130ndirme","datePublished":"2025-10-31T15:41:44+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/"},"wordCount":3930,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"image":{"@id":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/#primaryimage"},"thumbnailUrl":"https:\/\/example.com\/image.jpg","inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/","url":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/","name":"Canvas API ile Olu\u015fturulan G\u00f6rselleri toBlob Kullanarak \u0130ndirme - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/#primaryimage"},"image":{"@id":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/#primaryimage"},"thumbnailUrl":"https:\/\/example.com\/image.jpg","datePublished":"2025-10-31T15:41:44+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/"]}]},{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/#primaryimage","url":"https:\/\/example.com\/image.jpg","contentUrl":"https:\/\/example.com\/image.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/canvas-api-ile-olusturulan-gorselleri-toblob-kullanarak-indirme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Canvas API ile Olu\u015fturulan G\u00f6rselleri toBlob Kullanarak \u0130ndirme"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33259","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=33259"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33259\/revisions"}],"predecessor-version":[{"id":33260,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33259\/revisions\/33260"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33259"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}