<স্ক্যানভাস> উপাদানটির সর্বাধিক আকার

112

আমি উচ্চতা সঙ্গে একটি ক্যানভাস উপাদানের সঙ্গে কাজ করছি 600করতে 1000পিক্সেল এবং বেশ কিছু দশ বা পিক্সেল শত সহস্র একটি প্রস্থ। তবে নির্দিষ্ট সংখ্যক পিক্সেলের পরে (স্পষ্টতই অজানা), ক্যানভাস আর জেএসের সাথে আঁকা আকারগুলি প্রদর্শন করবে না।

সীমা আছে কি কেউ জানেন?

ক্রোম 12 এবং ফায়ারফক্স 4 এ উভয়ই পরীক্ষিত।

javascript  html  canvas 
— seriousdev
সূত্র
2
@ Šime তিনি বলেছেন tens OR hundreds of thousands...
— টাদেক
6
আমিও এটি অভিজ্ঞতা। আমার কাছে 8000x8000 ক্যানভাস রয়েছে যা ঠিক আছে, তবে আমি যখন এটি বড় করি তখন বিষয়বস্তুটি অদৃশ্য হয়ে যায় এবং এটি আঁকবে না। এটি যে আকারে কাজ করতে ব্যর্থ হয় তা আমার আইপ্যাডের থেকে অনেক কম। আমি যদি এটি কোনও ধরণের স্মৃতি সীমাবদ্ধতা অবাক হয়।
— জোশুয়া
28
এটি অদ্ভুত যখন আপনি 2 বছর আগে থেকে আপনার নিজের মন্তব্যটি খুঁজে পান এবং আপনি এখনও একইরকম সমস্যা নিয়ে কাজ করছেন।
— জোশুয়া
4
@ জোশুয়া এবং এখনও এক বছর পরে!
— ইউজিন ইউ
1
প্রশ্নটি হ'ল আমি কীভাবে এই ত্রুটিগুলি বা আরও ভাল সতর্কতাগুলি ধরব, সেগুলি কী? আমি ডিভাইসগুলির হার্ডওয়্যার সনাক্ত করতে পারি না, সুতরাং আমাকে একটি ত্রুটির প্রতিক্রিয়া জানাতে হবে।
— br4nnigan

উত্তর:

115

10/13/2014 আপডেট হয়েছে

সমস্ত পরীক্ষিত ব্রাউজারগুলির ক্যানভাস উপাদানগুলির উচ্চতা / প্রস্থের সীমা রয়েছে তবে অনেকগুলি ব্রাউজারগুলি ক্যানভাস উপাদানটির মোট ক্ষেত্রও সীমিত করে। সীমাগুলি ব্রাউজারগুলির আমি নিম্নলিখিত পরীক্ষা করতে সক্ষম হচ্ছি তার জন্য নিম্নলিখিত:

ক্রোম:

সর্বাধিক উচ্চতা / প্রস্থ: 32,767 পিক্সেল
সর্বাধিক এলাকা: 268,435,456 পিক্সেল (উদাঃ, 16,384 x 16,384)

ফায়ারফক্স:

সর্বাধিক উচ্চতা / প্রস্থ: 32,767 পিক্সেল
সর্বাধিক ক্ষেত্র: 472,907,776 পিক্সেল (যেমন, 22,528 x 20,992)

অর্থাৎ,

সর্বাধিক উচ্চতা / প্রস্থ: 8,192 পিক্সেল
সর্বাধিক ক্ষেত্র: N / A

আইই মোবাইল:

সর্বোচ্চ উচ্চতা / প্রস্থ: 4,096 পিক্সেল els
সর্বাধিক ক্ষেত্র: N / A

অন্য:

আমি এই সময়ে অন্যান্য ব্রাউজারগুলি পরীক্ষা করতে পারছি না। অতিরিক্ত সীমাবদ্ধতার জন্য এই পৃষ্ঠায় অন্যান্য উত্তরগুলি দেখুন।

বেশিরভাগ ব্রাউজারে সর্বাধিক দৈর্ঘ্য / প্রস্থ / অঞ্চল অতিক্রম করা ক্যানভাসকে অকেজো করে তোলে। (এটি কোনও ব্যবহারযোগ্য জায়গাতেও কোনও ড্র আদেশকে অগ্রাহ্য করবে)) আইই ও আইই মোবাইল ব্যবহারযোগ্য জায়গার মধ্যে সমস্ত ড্র কমান্ডকে সম্মান জানাবে।

— ব্র্যান্ডন গ্যানো
সূত্র
3
সুতরাং, সম্পর্কিত প্রশ্ন ... যদি তাদের সর্বাধিক অনুমোদিত সেকেন্ডের চেয়ে বড় ক্যানভাসের প্রয়োজন হয় তবে তাদের সীমাবদ্ধতা কীভাবে কাজ করবে?
— এর্থ
2
@ অ্যারোথ, আমি ক্যানভাস এপিআইয়ের চারপাশে একটি মোড়ক লিখে শেষ করেছি যা একাধিক স্ট্যাকড <canvas>উপাদান ব্যবহার করেছিল এবং যথাযথ প্রসঙ্গে স্বয়ংক্রিয়ভাবে অঙ্কন নির্দেশাবলী প্রয়োগ করেছিল।
— ব্র্যান্ডন গ্যানো
1
খুব দরকারী মনে হচ্ছে। মনে করবেন না এটি গিথুবে আছে?
— আরথ
5
সাফারি (নন-আইওএস সংস্করণ) Chrome.Firefox এর মতো 32K ব্যবহার করে। এছাড়াও, আপনি যদি সেই মোড়ক কোডটির কিছুটি পুনরায় তৈরি করতে চেষ্টা করতে চান তবে আমি IE এর পালটিক 8 কে সীমাতে নিজের ধন্যবাদের একটি মুক্ত-উত্স সংস্করণ শুরু করেছি: github.com/adam-roth/wrapped-canvas
— aroth
7
আইফোন 6 প্লাসের আইওএস 9.3.1 সাফারি 16777216 পিক্সেল (উদাহরণস্বরূপ, 4096 x 4096) অঞ্চলে সীমাবদ্ধ। আমি সন্দেহ করি যে এটি নতুন আইওএস ডিভাইসগুলির মধ্যে একটি সাধারণ সংখ্যা
— matb33
16

আমি ফায়ারফক্সে 8000 এর চেয়েও বেশি ক্যানভাস উচ্চতায় মেমরির ত্রুটিগুলি ছুঁড়েছি, ক্রোমটি আরও বেশি হ্যান্ডেল করছে বলে মনে হচ্ছে কমপক্ষে 32000।

সম্পাদনা: আরও কিছু পরীক্ষা চালানোর পরে, আমি ফায়ারফক্স ১ 16.০.২ এর সাথে খুব অদ্ভুত ত্রুটি পেয়েছি।

প্রথমত, আমি এইচটিএমএল ঘোষিত ক্যানভাসের বিপরীতে মেমরির (জাভাস্ক্রিপ্টে তৈরি) ক্যানভাস থেকে আলাদা আচরণ পেয়েছি বলে মনে হচ্ছে।

দ্বিতীয়ত, আপনার কাছে যদি সঠিক এইচটিএমএল ট্যাগ এবং মেটা চরসেট না থাকে তবে ক্যানভাসটি 8196-এ সীমাবদ্ধ থাকবে, অন্যথায় আপনি 32767 পর্যন্ত যেতে পারেন।

তৃতীয়ত, আপনি যদি ক্যানভাসের 2 ডি প্রসঙ্গ পান এবং তারপরে ক্যানভাসের আকার পরিবর্তন করেন তবে আপনি 8196 এও সীমাবদ্ধ থাকতে পারেন। 2 ডি প্রসঙ্গটি ধরার আগে কেবল ক্যানভাসের আকারটি সেট করা আপনাকে মেমরির ত্রুটি না পেয়ে 32767 অবধি মঞ্জুরি দেয়।

আমি ধারাবাহিকভাবে মেমরির ত্রুটিগুলি পেতে সক্ষম হয়ে উঠতে পারি না, কখনও কখনও এটি কেবল প্রথম পৃষ্ঠার লোডে থাকে এবং তারপরে উচ্চতা পরবর্তী কাজগুলি পরিবর্তন করে। এটি এইচটিএমএল ফাইল যা আমি http://pastebin.com/zK8nZxdE এর সাথে পরীক্ষা করছিলাম ।

— বেন বার্নেট
সূত্র
4
"দ্বিতীয়ত, আপনার যদি সঠিক এইচটিএমএল ট্যাগ এবং মেটা চরসেট না থাকে তবে ক্যানভাসটি 8196-এ সীমাবদ্ধ থাকতে পারে, অন্যথায় আপনি 32767 পর্যন্ত যেতে পারেন" - এখানে সঠিক এইচটিএমএল ট্যাগ এবং মেটা চরসেট বলতে কী বোঝ?
— জ্যাক এইডলি 20'15
অবশ্যই আপনার অর্থ 8192 (2 ^ 13)? 8196 একটি অদ্ভুত সংখ্যা।
— জেমসডলিন
14

আইওএস সর্বাধিক ক্যানভাস আকার (প্রস্থ এক্স উচ্চতা):

 iPod Touch 16GB = 1448x1448
 iPad Mini       = 2290x2289
 iPhone 3        = 1448x1448
 iPhone 5        = 2290x2289

মার্চ 2014 এ পরীক্ষা করা হয়েছে।

— তক্তা
সূত্র
এই মানগুলি নির্বিচারে। দয়া করে নীচে আমার পোস্টটি দেখুন যা সাফারির সামগ্রী গাইডের উল্লেখ করে
— ডিসিবারানস
11

@ ফ্রেডেরিকেরেটে উত্তরটি কিছুটা প্রসারিত করতে: "আইওএস রিসোর্স সীমাবদ্ধতাগুলি জানুন" বিভাগের অধীনে সাফারির সামগ্রী গাইড অনুসারে:

ক্যানভাস উপাদানটির সর্বোচ্চ আকার 256 এমবি র‌্যামের চেয়ে কম র‌্যামযুক্ত ডিভাইসের জন্য 3 মেগাপিক্সেল এবং 256 এমবি র‌্যামের চেয়ে বেশি বা সমান ডিভাইসগুলির জন্য 5 মেগাপিক্সেল

অতএব, 5242880 (5 x 1024 x 1024) পিক্সেলের আকারের কোনও প্রকারের বৃহত মেমরি ডিভাইসে কাজ করবে, অন্যথায় এটি 3145728 পিক্সেল।

5 মেগাপিক্সেল ক্যানভাসের জন্য উদাহরণ (প্রস্থ x উচ্চতা):

Any total <= 5242880
--------------------
5 x 1048576 ~= 5MP   (1048576 = 1024 x 1024)
50 x 104857 ~= 5MP
500 x 10485 ~= 5MP

ইত্যাদি

বৃহত্তম স্কয়ার ক্যানভ্যাসগুলি হ'ল ("মাইবি" = 1024x1024 বাইট):

device < 256 MiB   device >= 256 MiB   iPhone 6 [not confirmed]
-----------------  -----------------   ---------------------
<= 3145728 pixels  <= 5242880 pixels   <= 16 x 1024 x 1024 p
1773 x 1773        2289 x 2289         4096 x 4096
— dcbarans
সূত্র
1
আরও সুনির্দিষ্টভাবে বলতে গেলে, আইফোন 5 সীমা 3 * 1024 * 1024 = 3145728 পিক্সেল। (অ্যান্ড্রয়েডে আমার ক্যানভাসটি ঠিকঠাক তবে আইওএসে ফাঁকা ছিল কেন তা ভেবে দেখার পরে, আমি এই উত্তরটি পেয়েছি এবং এছাড়াও স্ট্যাকওভারফ্লো / প্রশ্নগুলি / 12556198 /… পেয়েছি এবং আমার ফোনগ্যাপ অ্যাপ্লিকেশনটি কাজ করছে))
— ম্যাগনাস স্মিথ
এফওয়াইআই, অ্যাপল "সাফারি / নো আইওএস রিসোর্স সীমাগুলি" থেকে নির্দিষ্ট আকারের তথ্য সরিয়ে দিয়েছে। এখন ছোট চিত্রগুলি ব্যবহার করে ব্যান্ডউইদথ হ্রাস করার বিষয়ে কেবল সাধারণ পরামর্শ।
— স্টিভ
@ matb33 সীমা 16 * 1024 * 1024. আছে যে আইফোন 6 প্রদর্শিত হয় প্রশ্নে একটি মন্তব্য রিপোর্ট
— ToolmakerSteve
11

2018 এর জন্য আপডেট:

সময় বাড়ার সাথে সাথে ক্যানভাসের সীমাবদ্ধতাও বদলে গেছে। দুঃখের বিষয়, যা পরিবর্তিত হয়নি তা হ'ল ব্রাউজারটি এখনও ক্যানভাস এপিআইয়ের মাধ্যমে ক্যানভাস আকারের সীমাবদ্ধতার তথ্য সরবরাহ করে না।

ব্রাউজারের সর্বাধিক ক্যানভাস আকার বা কাস্টম ক্যানভাস মাত্রার জন্য পরীক্ষার সমর্থনটিকে প্রোগ্রামগতভাবে নির্ধারণ করতে খুঁজছেন তাদের জন্য ক্যানভাস-আকারটি পরীক্ষা করে দেখুন ।

ডক্স থেকে:

এইচটিএমএল ক্যানভাস উপাদান আধুনিক এবং লেগ্যাসি ব্রাউজারগুলি দ্বারা ব্যাপকভাবে সমর্থিত, তবে প্রতিটি ব্রাউজার এবং প্ল্যাটফর্ম সংমিশ্রণটি অনন্য আকারের সীমাবদ্ধতা আরোপ করে যা ক্যানভাসকে অকার্যকর হিসাবে রেন্ডার করে। দুর্ভাগ্যক্রমে, ব্রাউজারগুলি তাদের সীমাবদ্ধতাগুলি কী তা নির্ধারণের জন্য কোনও উপায় সরবরাহ করে না বা অযৌক্তিক ক্যানভাস তৈরি হওয়ার পরে তারা কোনও ধরণের প্রতিক্রিয়া সরবরাহ করে না। এটি বড় ক্যানভাস উপাদানগুলির সাথে কাজ করা একটি চ্যালেঞ্জ করে তোলে, বিশেষত বিভিন্ন ব্রাউজার এবং প্ল্যাটফর্মগুলিকে সমর্থন করে এমন অ্যাপ্লিকেশনগুলির জন্য।

এই মাইক্রো-লাইব্রেরি ব্রাউজার দ্বারা সমর্থিত একটি HTML ক্যানভাস উপাদানটির সর্বোচ্চ ক্ষেত্র, উচ্চতা এবং প্রস্থের পাশাপাশি কাস্টম ক্যানভাসের মাত্রাগুলি পরীক্ষা করার ক্ষমতা সরবরাহ করে। কোনও নতুন ক্যানভাস উপাদান তৈরি হওয়ার আগে এই তথ্য সংগ্রহ করে, অ্যাপ্লিকেশনগুলি প্রতিটি ব্রাউজার / প্ল্যাটফর্মের আকার সীমাবদ্ধতার মধ্যে নির্ভরযোগ্যভাবে ক্যানভাসের মাত্রা নির্ধারণ করতে সক্ষম হয়।

একটি ডেমো লিঙ্ক এবং পরীক্ষার ফলাফলগুলি README তে উপলব্ধ রয়েছে , পাশাপাশি একটি জ্ঞাত সমস্যা বিভাগ যা পারফরম্যান্স এবং ভার্চুয়াল মেশিন বিবেচনাগুলিতে স্পর্শ করে।

সম্পূর্ণ প্রকাশ, আমি গ্রন্থাগারের লেখক। আমি এটি 2014 সালে আবার তৈরি করেছিলাম এবং সম্প্রতি একটি নতুন ক্যানভাস-সম্পর্কিত প্রকল্পের কোডটি পুনর্বিবেচনা করেছি। 2018 সালে ক্যানভাস আকারের সীমাবদ্ধতাগুলি সনাক্ত করার জন্য উপলভ্য সরঞ্জামগুলির একই অভাবটি দেখে আমি অবাক হয়েছিলাম তাই আমি কোড আপডেট করেছি, এটি প্রকাশ করেছি এবং আশা করি এটি অন্যদের অনুরূপ সমস্যাগুলিতে চলতে সহায়তা করে।

— jhildenbiddle
সূত্র
8

ডাব্লু 3 স্পেস অনুসারে , প্রস্থ / উচ্চতার ইন্টারফেসটি স্বাক্ষরিত দীর্ঘ নয় - সুতরাং 0 থেকে 4,294,967,295 (যদি আমি এই সংখ্যাটি ঠিক মনে করি - কিছুটা বন্ধ হতে পারে)।

2147483647.: সম্পাদন: স্ট্রেঞ্জলি, এটা দীর্ঘ স্বাক্ষরবিহীন বলে, কিন্তু এটা শো ম্যাক্স শুধু একটি স্বাভাবিক দীর্ঘ মান পরীক্ষা Jsfiddle থেকে 48 47 কাজ কিন্তু আপ এবং এটি ডিফল্ট ফিরে ফিরে আসে -।

— WSkid
সূত্র
হুম। আকর্ষণীয়, তবে আমি 1.5 বিলিয়নও পাই না।
— সিরিজদেব
সম্পাদিত, দুঃখিত (আমি প্রথমে টেস্ট না দেওয়ার জন্য যা পাই তা হ'ল) ​​- দেখানোর জন্য একটি জেএসফিডেল যুক্ত হয়েছে।
— ডাব্লুএসকিড
7

যদিও ক্যানভাস আপনাকে উচ্চতা = 2147483647 রাখার অনুমতি দেবে, যখন আপনি অঙ্কন শুরু করবেন, কিছুই হবে না

অঙ্কনটি কেবল তখনই ঘটে যখন আমি উচ্চতাটি 32767 এ ফিরিয়ে আনি

— avikaza123
সূত্র
7

আইওএসের বিভিন্ন সীমা রয়েছে।

আইওএস 7 সিমুলেটর ব্যবহার করে আমি সীমাটি 5MB এর মতো প্রদর্শন করতে সক্ষম হয়েছি:

var canvas = document.createElement('canvas');
canvas.width = 1024 * 5;
canvas.height = 1024;
alert(canvas.toDataURL('image/jpeg').length);
// prints "110087" - the expected length of the dataURL

তবে আমি যদি একক সারিতে পিক্সেলের সাহায্যে ক্যানভাসের আকারটিকে টানতে পারি:

var canvas = document.createElement('canvas');
canvas.width = 1024 * 5;
canvas.height = 1025;
alert(canvas.toDataURL('image/jpeg'));
// prints "data:," - a broken dataURL
— ম্যাট পোড়া
সূত্র
2
আইওএস সিমুলেটারে আপনাকে এই জাতীয় ডেটা বেস করা উচিত নয়।
— জোল্টন
5

পিসিতে-
আমি মনে করি না যে কোনও বিধিনিষেধ আছে তবে হ্যাঁ আপনি মেমরির ব্যতিক্রম থেকে বেরিয়ে আসতে পারেন।

মোবাইল devices- উপর
এখানে মোবাইল ডিভাইসের জন্য ক্যানভাস জন্য বিধিনিষেধ সুবিধাগুলো হলঃ -

ক্যানভাস উপাদানটির সর্বোচ্চ আকার 256 এমবি র‌্যামের চেয়ে কম র‌্যামযুক্ত ডিভাইসের জন্য 3 মেগাপিক্সেল এবং 256 এমবি র‌্যামের চেয়ে বেশি বা সমান ডিভাইসের জন্য 5 মেগাপিক্সেল।

সুতরাং উদাহরণস্বরূপ - আপনি যদি অ্যাপলের পুরানো হার্ডওয়্যারটি সমর্থন করতে চান তবে আপনার ক্যানভাসের আকার 2048 × 1464 ছাড়িয়ে যাবে না।

আশা করি এই সংস্থানগুলি আপনাকে এড়াতে সহায়তা করবে।

— মনীষ গুপ্ত
সূত্র
3

সাফারি (সমস্ত প্ল্যাটফর্ম) এর সীমাবদ্ধতা অনেক কম।

আইওএস / সাফারি সীমাবদ্ধতার জ্ঞাত

উদাহরণস্বরূপ, আমার কাছে একটি 6400x6400px ক্যানভাস বাফার ছিল যাতে এটিতে আঁকানো ডেটা থাকে। সামগ্রীটি ট্রেস / এক্সপোর্ট করে এবং অন্যান্য ব্রাউজারগুলিতে পরীক্ষা করে আমি দেখতে সক্ষম হয়েছি যে সবকিছু ঠিক আছে। তবে সাফারিতে এটি আমার নির্দিষ্ট প্রসঙ্গে এই নির্দিষ্ট বাফারের অঙ্কনটি এড়িয়ে যাবে।

— NodeNodeNode
সূত্র
Yeep! সাফারি আপনার ক্যানভাস অঙ্কন এড়িয়ে যায় কারণ আপনি "অনুমোদিত" হিসাবে বড় ক্যানভাস ব্যবহার করেন। উপরে পোস্ট করা সর্বোচ্চ মাত্রা দেখুন! এটি সর্বাধিক এই সাফারি / ডিভাইসে ক্যানভাস।
— দাদো
আপনার আকারগুলি বেশ নির্বিচারে, তাইনা? আপনার কি কোনও ডকুমেন্টেশন আছে? আপনার পরীক্ষার প্রক্রিয়াটি কী ছিল?
— নোডনোড নোড
3

আমি প্রোগ্রামটিমেটিকভাবে সীমাটি বের করার চেষ্টা করেছি: ক্যানভাসের আকার 35000 থেকে শুরু করে, বৈধ আকার না পাওয়া পর্যন্ত 100 দ্বারা নেমে আসা। প্রতিটি পদক্ষেপে ডান-নীচে পিক্সেল লিখুন এবং তারপরে এটি পড়ুন। এটি কাজ করে - সাবধানতার সাথে।

গতি গ্রহণযোগ্য হয় প্রস্থ বা উচ্চতা কিছু নিম্ন মান (যেমন 10-200।) এই ভাবে সেট করা হয় যদি: get_max_canvas_size('height', 20)।

তবে যদি প্রস্থ বা উচ্চতা ছাড়াই কল করা হয় get_max_canvas_size()তবে তৈরি ক্যানভাসটি এত বড় যে সিংগল পিক্সেলের রঙ পড়া খুব ধীর এবং আই এর মধ্যে মারাত্মক স্তব্ধ হয়ে যায়।

এটির মতো পরীক্ষা যদি পিক্সেল মান না পড়ে কোনওভাবে করা যায়, গতিটি গ্রহণযোগ্য হবে।

অবশ্যই সর্বাধিক আকার সনাক্ত করার সবচেয়ে সহজ উপায় হ'ল সর্বাধিক প্রস্থ এবং উচ্চতা সম্পর্কে জিজ্ঞাসা করার কিছু দেশীয় উপায়। তবে ক্যানভাসটি 'একটি জীবনযাত্রার মান', তাই এটি কোনও দিন আসছে may

http://jsfiddle.net/timo2012/tcg6363r/2/ (সচেতন হন! আপনার ব্রাউজারটি ঝুলতে পারে!)

if (!Date.now)
{
  Date.now = function now()
  {
    return new Date().getTime();
  };
}

var t0 = Date.now();
//var size = get_max_canvas_size('width', 200);
var size = get_max_canvas_size('height', 20);
//var size = get_max_canvas_size();
var t1 = Date.now();
var c = size.canvas;
delete size.canvas;
$('body').append('time: ' + (t1 - t0) + '<br>max size:' + JSON.stringify(size) + '<br>');
//$('body').append(c);

function get_max_canvas_size(h_or_w, _size)
{
  var c = document.createElement('canvas');
  if (h_or_w == 'height') h = _size;
  else if (h_or_w == 'width') w = _size;
  else if (h_or_w && h_or_w !== 'width' && h_or_w !== 'height' || !window.CanvasRenderingContext2D)
    return {
      width: null,
      height: null
    };
  var w, h;
  var size = 35000;
  var cnt = 0;
  if (h_or_w == 'height') w = size;
  else if (h_or_w == 'width') h = size;
  else
  {
    w = size;
    h = size;
  }

  if (!valid(w, h))
    for (; size > 10; size -= 100)
    {
      cnt++;
      if (h_or_w == 'height') w = size;
      else if (h_or_w == 'width') h = size;
      else
      {
        w = size;
        h = size;
      }
      if (valid(w, h)) break;
    }
  return {
    width: w,
    height: h,
    iterations: cnt,
    canvas: c
  };

  function valid(w, h)
  {
    var t0 = Date.now();
    var color, p, ctx;
    c.width = w;
    c.height = h;
    if (c && c.getContext)
      ctx = c.getContext("2d");
    if (ctx)
    {
      ctx.fillStyle = "#ff0000";
      try
      {
        ctx.fillRect(w - 1, h - 1, 1, 1);
        p = ctx.getImageData(w - 1, h - 1, 1, 1).data;
      }
      catch (err)
      {
        console.log('err');
      }

      if (p)
        color = p[0] + '' + p[1] + '' + p[2];
    }
    var t1 = Date.now();

    if (color == '25500')
    {
      console.log(w, h, true, t1 - t0);
      return true;
    }
    console.log(w, h, false, t1 - t0);
    return false;
  }
}
— টিমো কাহকেনেন
সূত্র
2
— উইকি / এক্সপোনশিয়াল_সার্চ
1
এটা সত্যিই উন্মাদ হয় যে একটি ক্যানভাস এই বিশাল নীরব তৈরি তাই সনাক্ত করতে কোন উপায় নেই ... আপনার পক্ষ থেকে কোনো উপায়ে খারাপ না ব্যর্থতা, এটা আমাদের উপর বসন্ত ব্রাউজারের জন্য শুধু একটি পাগল জিনিস
— কলিন ডি
@ কলিন্ড আমি সম্মত এটি কোথাও মাত্র এক সামান্য তথ্য হবে। এটি হবে. এবং করা উচিত।
— টিমো কাহকেনেন
3

আপনি যখন ওয়েবজিএল ক্যানভ্যাসগুলি ব্যবহার করছেন, ব্রাউজারগুলি (ডেস্কটপগুলি সহ) অন্তর্নিহিত বাফারের আকারের উপর অতিরিক্ত সীমাবদ্ধতা আরোপ করবে। এমনকি যদি আপনার ক্যানভাসটি বড় হয়, যেমন 16,000x16,000, বেশিরভাগ ব্রাউজারগুলি একটি ছোট (4096x4096 বলি) চিত্র রেন্ডার করে এটিকে স্কেল করে দেয়। এটি কুৎসিত পিক্সেলটিং ইত্যাদির কারণ হতে পারে

তাত্পর্যপূর্ণ অনুসন্ধান ব্যবহার করে সর্বাধিক আকার নির্ধারণ করতে আমি কিছু কোড লিখেছি, যদি কারও যদি এটির প্রয়োজন হয়। determineMaxCanvasSize()আপনি আগ্রহী ফাংশন হয়।

function makeGLCanvas()
{
    // Get A WebGL context
    var canvas = document.createElement('canvas');
    var contextNames = ["webgl", "experimental-webgl"];
    var gl = null;
    for (var i = 0; i < contextNames.length; ++i)
    {
        try
        {
            gl = canvas.getContext(contextNames[i], {
                // Used so that the buffer contains valid information, and bytes can
                // be retrieved from it. Otherwise, WebGL will switch to the back buffer
                preserveDrawingBuffer: true
            });
        }
        catch(e) {}
        if (gl != null)
        {
            break;
        }
    }
    if (gl == null)
    {
        alert("WebGL not supported.\nGlobus won't work\nTry using browsers such as Mozilla " +
            "Firefox, Google Chrome or Opera");
        // TODO: Expecting that the canvas will be collected. If that is not the case, it will
        // need to be destroyed somehow.
        return;
    }

    return [canvas, gl];
}

// From Wikipedia
function gcd(a,b) {
    a = Math.abs(a);
    b = Math.abs(b);
    if (b > a) {var temp = a; a = b; b = temp;}
    while (true) {
        if (b == 0) return a;
        a %= b;
        if (a == 0) return b;
        b %= a;
    }
}

function isGlContextFillingTheCanvas(gl) {
    return gl.canvas.width == gl.drawingBufferWidth && gl.canvas.height == gl.drawingBufferHeight;
}

// (See issue #2) All browsers reduce the size of the WebGL draw buffer for large canvases 
// (usually over 4096px in width or height). This function uses a varian of binary search to
// find the maximum size for a canvas given the provided x to y size ratio.
//
// To produce exact results, this function expects an integer ratio. The ratio will be equal to:
// xRatio/yRatio.
function determineMaxCanvasSize(xRatio, yRatio) {
    // This function works experimentally, by creating an actual canvas and finding the maximum
    // value, the browser allows.
    [canvas, gl] = makeGLCanvas();

    // Reduce the ratio to minimum
    gcdOfRatios = gcd(xRatio, yRatio);
    [xRatio, yRatio] = [xRatio/gcdOfRatios, yRatio/gcdOfRatios];

    // if the browser cannot handle the minimum ratio, there is not much we can do
    canvas.width = xRatio;
    canvas.height = yRatio;

    if (!isGlContextFillingTheCanvas(gl)) {
        throw "The browser is unable to use WebGL canvases with the specified ratio: " + 
            xRatio + ":" + yRatio;
    }

    // First find an upper bound
    var ratioMultiple = 1;  // to maintain the exact ratio, we will keep the multiplyer that
                            // resulted in the upper bound for the canvas size
    while (isGlContextFillingTheCanvas(gl)) {
        canvas.width *= 2;
        canvas.height *= 2;
        ratioMultiple *= 2;
    }

    // Search with minVal inclusive, maxVal exclusive
    function binarySearch(minVal, maxVal) {
        if (minVal == maxVal) {
            return minVal;
        }

        middle = Math.floor((maxVal - minVal)/2) + minVal;

        canvas.width = middle * xRatio;
        canvas.height = middle * yRatio;

        if (isGlContextFillingTheCanvas(gl)) {
            return binarySearch(middle + 1, maxVal);
        } else {
            return binarySearch(minVal, middle);
        }
    }

    ratioMultiple = binarySearch(1, ratioMultiple);
    return [xRatio * ratioMultiple, yRatio * ratioMultiple];
}

এছাড়াও একটি জেএসফিডে https://jsfiddle.net/1sh47wfk/1/

— মাইকেল
সূত্র
স্কেলিং আপ আচরণ সম্পর্কিত কোনও অফিসিয়াল ডকুমেন্টেশন আছে কি?
— ম্যাগনাস লিন্ড অক্সলন্ড
1
উত্তর থেকে প্রাপ্ত তথ্য পরীক্ষামূলকভাবে নির্ধারণ করা হয়েছে। দ্রুত অনুসন্ধানের পরে আমি যে নিকটতম জিনিসটি পেয়েছি তা হ'ল : khronos.org/registry/webgl/specs/latest/1.0/#2.2 , বলেছেন: "উপরের সীমাবদ্ধতা ওয়েব পৃষ্ঠায় ক্যানভাস উপাদানটি যে পরিমাণ স্থান নেয় তা পরিবর্তন করে না does "যখন এটি অঙ্কন বাফারের আকার সীমাবদ্ধ করার বিষয়ে কথা বলবে। দেখে মনে হচ্ছে যে ক্যানভাস উপাদানটি কীভাবে অঙ্কন বাফারটি প্রদর্শন করবে সে সম্পর্কে ওয়েবজিএল স্ট্যান্ডার্ড ক্রেজি বিশদে যায় না।
— মিচা
1

আপনি এটিকে সঙ্কুচিত করতে পারেন এবং জাভাস্ক্রিপ্ট অটোতে প্রয়োজন অনুযায়ী অনেক ছোট ক্যানভ্যাস যুক্ত করতে পারেন এবং উপযুক্ত ক্যানভাসে উপাদানগুলি আঁকতে পারেন। আপনি এখনও মেমরি শেষ পর্যন্ত শেষ পর্যন্ত হতে পারে কিন্তু একক ক্যানভাস সীমা দ্বারা আপনাকে পেতে হবে।

— JJ_Coder4Hire
সূত্র
0

জঞ্জালবিহীনভাবে কীভাবে সর্বোচ্চ সম্ভাব্য আকারটি সনাক্ত করা যায় তা আমি জানি না, তবে কোনও প্রদত্ত ক্যানভাস আকার পিক্সেলটি পূরণ করে এবং তারপরে রঙটি আবার বের করে কীভাবে কাজ করে তা আপনি সনাক্ত করতে পারেন। ক্যানভাস যদি রেন্ডার না করে থাকে তবে আপনার ফিরে পাওয়া রঙটি মিলবে না। ওয়াট

আংশিক কোড:

function rgbToHex(r, g, b) {
    if (r > 255 || g > 255 || b > 255)
        throw "Invalid color component";
    return ((r << 16) | (g << 8) | b).toString(16);
}
var test_colour = '8ed6ff';
working_context.fillStyle = '#' + test_colour;
working_context.fillRect(0,0,1,1);
var colour_data = working_context.getImageData(0, 0, 1, 1).data;
var colour_hex = ("000000" + rgbToHex(colour_data[0], colour_data[1], colour_data[2])).slice(-6);
— SystemicPlural
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.