এইচটিএমএল <ক্যানভাস> সনাক্ত করার সেরা উপায়টি সমর্থিত নয়

139

ব্রাউজারটি এইচটিএমএল 5 <canvas>ট্যাগ সমর্থন করে না এমন পরিস্থিতিগুলির সাথে মোকাবিলার মানক উপায় হ'ল কিছু ফলব্যাক সামগ্রী এম্বেড করা:

<canvas>Your browser doesn't support "canvas".</canvas>

তবে পৃষ্ঠাটির বাকী অংশ একই থাকে যা অনুপযুক্ত বা বিভ্রান্তিকর হতে পারে। আমি ক্যানভাসকে অসমর্থন সনাক্ত করার কিছু উপায় চাই যাতে আমি আমার বাকী পৃষ্ঠাটি সেই অনুযায়ী উপস্থাপন করতে পারি। আপনি কি সুপারিশ করতেন?

— brainjam
সূত্র

217

এটি মডার্নিজর এবং মূলত ক্যানভাসে কাজ করে এমন অন্যান্য লাইব্রেরিতে ব্যবহৃত কৌশল:

function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}

যেহেতু আপনার প্রশ্নটি সমর্থিত নয় যখন এটি সনাক্তকরণের জন্য ছিল , তাই আমি এটিকে এটির মতো ব্যবহার করার পরামর্শ দিচ্ছি:

if (!isCanvasSupported()){ ...

— পল আইরিশ
সূত্র

14

ডাবল নেগেশন (!!) কেন দাঁড়ায়?

16

যদি ক্যানভাস না থাকে elem.getContext == undefined,। !undefined = true, এবং !true = false, সুতরাং এটি আমাদের সংজ্ঞায়িত বা প্রসঙ্গে না দিয়ে একটি বিল ফিরিয়ে দেয়।

— ধনী ব্র্যাডশো

1

@ 2astalavista দ্বৈত নেতিবাচক (!!) কাস্টিংয়ের মতো। এটি একটি সত্য বা মিথ্যা বিবৃতি একটি বুলিয়ান রূপান্তরিত করে। উদাহরণস্বরূপ: var i = 0। আমি মিথ্যাতে মূল্যায়ন করি, তবে টাইপ করে আমি "নম্বর" ফিরিয়ে দিই। টাইপফ !! আমি "বুলিয়ান" ফিরিয়ে দিই।

— ব্যবহারকারী 2

বুলিয়ানকে "castালাই" করার আরেকটি উপায় হ'ল undefined ? true : false(যদিও কিছুটা লম্বা হলেও)।

— vcapra1

1

আমার খেয়াল করা উচিত যে বিভিন্ন ধরণের ক্যানভাস সমর্থন রয়েছে। প্রথমদিকে ব্রাউজার বাস্তবায়ন সমর্থন করে না toDataURL। এবং অপেরা মিনি কোনও পাঠ্য API সমর্থন ছাড়াই কেবল বেসিক ক্যানভাস রেন্ডারিংকে সমর্থন করে । অপেরা মিনিকে কেবল ক্রস রেফারেন্সের জন্য এইভাবে বাদ দেওয়া যেতে পারে ।

— hexalys

103

ব্রাউজারগুলিতে ক্যানভাস সমর্থন সনাক্ত করার দুটি জনপ্রিয় পদ্ধতি রয়েছে:

ম্যাটসের অস্তিত্বের জন্য যাচাইয়ের পরামর্শ , getContextমডার্নিজার লাইব্রেরি দ্বারা এটি একই ধরণের ব্যবহৃত হয়েছিল:
```
var canvasSupported = !!document.createElement("canvas").getContext;
```
ওয়েবআইডিএল এবং এইচটিএমএল স্পেসিফিকেশন HTMLCanvasElementদ্বারা সংজ্ঞায়িত ইন্টারফেসের অস্তিত্ব পরীক্ষা করা । আইই 9 টি দলের কোনও ব্লগ পোস্টেও এই পদ্ধতির প্রস্তাব দেওয়া হয়েছিল ।
```
var canvasSupported = !!window.HTMLCanvasElement;
```

আমার সুপারিশটি বিভিন্ন কারণে বিভিন্ন কারণে ( অতিরিক্ত নোট দেখুন ):

আইএন 9 সহ - প্রতিটি পরিচিত ব্রাউজার ক্যানভাসকে সমর্থন করে এই ইন্টারফেসটি প্রয়োগ করে;
কোডটি কী করছে তা এটি আরও সংক্ষিপ্ত এবং তাত্ক্ষণিকভাবে সুস্পষ্ট;
সমস্ত ব্রাউজার জুড়ে এই getContextপদ্ধতিটি উল্লেখযোগ্যভাবে ধীর , কারণ এটিতে একটি HTML উপাদান তৈরি করা জড়িত। আপনার যখন যথাসম্ভব পারফরম্যান্স কষানোর দরকার হয় তখন এটি আদর্শ নয় (উদাহরণস্বরূপ মডার্নিজারের মতো একটি লাইব্রেরিতে)।

প্রথম পদ্ধতিটি ব্যবহার করার মতো কোনও লক্ষণীয় সুবিধা নেই। উভয় পন্থা ছদ্মবেশী করা যেতে পারে, তবে এটি দুর্ঘটনার দ্বারা হওয়ার সম্ভাবনা নেই।

অতিরিক্ত নোট

এটি এখনও 2 ডি প্রসঙ্গে পুনরুদ্ধার করা যেতে পারে তা যাচাই করা প্রয়োজন হতে পারে। কথিত আছে যে, কিছু মোবাইল ব্রাউজারে চেক উপরে উভয়ের জন্য সত্য ফিরে, কিন্তু আসতে পারেন nullজন্য .getContext('2d')। এই কারণেই মডার্নিজার এর ফলাফলও পরীক্ষা করে .getContext('2d')। তবে, ওয়েবআইডিএল এবং এইচটিএমএল - আবার - আমাদের আরও একটি ভাল, দ্রুত বিকল্প দেয়:

var canvas2DSupported = !!window.CanvasRenderingContext2D;

লক্ষ্য করুন যে আমরা পুরোপুরি ক্যানভাস উপাদানটির জন্য চেকিং এড়াতে পারি এবং 2D রেন্ডারিং সমর্থনটির জন্য সরাসরি যাচাই করতে পারি। দ্যCanvasRenderingContext2Dইন্টারফেস এছাড়াও এইচটিএমএল স্পেসিফিকেশন অংশ।

আপনি আবশ্যক ব্যবহার getContextপদ্ধতির WebGL এর detecting জন্য , কারণ যদিও ব্রাউজারকে সমর্থন করতে পারে সমর্থন WebGLRenderingContext, getContext()ফেরত দিতে পারেন নাল যদি ব্রাউজার চালক সমস্যার কারণে জিপিইউ সঙ্গে ইন্টারফেস করতে অক্ষম এবং কোন সফ্টওয়্যার বাস্তবায়ন। এই ক্ষেত্রে, ইন্টারফেসের জন্য প্রথমে পরীক্ষা করা আপনাকে চেকিং এড়াতে দেয় getContext:

var cvsEl, ctx;
if (!window.WebGLRenderingContext)
    window.location = "http://get.webgl.org";
else {
    cvsEl = document.createElement("canvas");
    ctx = cvsEl.getContext("webgl") || cvsEl.getContext("experimental-webgl");

    if (!ctx) {
        // Browser supports WebGL, but cannot create the context
    }
}

পারফরম্যান্স তুলনা

getContextফায়ারফক্স 11 এবং অপেরা 11-এ 85-90% ধীর এবং ক্রোমিয়াম 18 এ প্রায় 55% ধীর গতির the

— অ্যান্ডি ই
সূত্র

10

নোকিয়া এস 60 এবং ব্ল্যাকবেরি স্টর্ম এমন কয়েকটি ডিভাইসগুলির মধ্যে রয়েছে যা আপনার প্রস্তাবিত 2 ডি ক্যানভাস সনাক্তকরণে মিথ্যা ইতিবাচক হবে will দুর্ভাগ্যক্রমে, মোবাইল খুব লোমশ হয়ে যায় এবং বিক্রেতারা নিয়মগুলি মানেন না। :( সুতরাং সঠিক ফলাফলের নিশ্চয়তা দেওয়ার জন্য আমরা আরও সম্পূর্ণ (অর্থাৎ ধীর) পরীক্ষা দিয়ে শেষ করেছি

— পল আইরিশ

@ পল: এটি আকর্ষণীয়, আমি ব্ল্যাকবেরি স্টর্ম ইমুলেটর পরীক্ষা করেছিলাম, তারা সবাই falseআপনার উদাহরণ এবং আমার উভয়ের জন্য ফিরে এসেছিল , মনে হয় তারা CanvasRenderingContext2Dইন্টারফেসটি সরবরাহ করে না। আমি এখনও S60 পরীক্ষা করতে অক্ষম হয়েছি, আমি এখনও খুব কৌতূহলী এবং যদিও খুব শীঘ্রই এটি করতে পারি।

— অ্যান্ডি ই

1

এটি আকর্ষণীয়, তবে যতক্ষণ না পরীক্ষাটি একশত বা মিলিসের অধীনে আসে, ততক্ষণ তা কি ঠিক না? আমি ধারণা করি যে তারা যাই হোক না কেন এর চেয়ে অনেক দ্রুত। আপনি যদি কোনও ফাংশন স্মরণ করে যা এর জন্য পরীক্ষা করে থাকে তবে আপনাকে কেবল একবার মূল্য দিতে হবে।

— ড্রয় নোকস

1

আমি আপনার মানদণ্ড চালিয়েছি এবং এমনকি 'ধীর' দৃষ্টিভঙ্গি সেকেন্ডে ~ 800,000 বার করা যেতে পারে। আবার, যদি ফলাফলটি ক্যাচ করা হয় তবে কোন পদ্ধতির ব্যবহারের সিদ্ধান্তটি দৃust়তার উপর ভিত্তি করে হওয়া উচিত, কর্মক্ষমতা নয় (ধরে নেওয়া

— দৃ rob়তার

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

— অ্যান্ডি ই

13

আমি getContextযখন আমার ক্যানভাস অবজেক্ট তৈরি করি তখন আমি সাধারণত একটি চেক পরিচালনা করি।

(function () {
    var canvas = document.createElement('canvas'), context;
    if (!canvas.getContext) {
        // not supported
        return;
    }

    canvas.width = 800;
    canvas.height = 600;
    context = canvas.getContext('2d');
    document.body.appendChild(canvas);
}());

যদি এটি সমর্থিত হয়, তবে আপনি ক্যানভাস সেটআপ চালিয়ে যেতে এবং এটি ডিওমে যুক্ত করতে পারেন। এটি প্রগ্রেসিভ এনহান্সমেন্টের একটি সহজ উদাহরণ , যা আমি (ব্যক্তিগতভাবে) গ্রেসফুল অবক্ষয়ের চেয়ে বেশি পছন্দ করি।

— ঔজ্বল্যহীন
সূত্র

এটি কি , contextদ্বিতীয় লাইনের পথভ্রষ্ট ?

— ব্রেইনজাম

7

@ ব্রেনজাম - না, আমি কোডটির শেষের দিকে সেই পরিবর্তনশীলটি ব্যবহার করি। আমি জেএসলিন্টের 'সুপারিশগুলি' অনুসরণ করার চেষ্টা করি (এই ক্ষেত্রে .. varপ্রতি ফাংশনটিতে কেবল 1 বিবৃতি)।

— ম্যাট

6

কেন আধুনিকীকরণ চেষ্টা করবেন না ? এটি একটি জেএস লাইব্রেরি যা সনাক্তকরণের ক্ষমতা সরবরাহ করে।

উদ্ধৃতি:

সীমানা-ব্যাসার্ধের মতো শীতল বৈশিষ্ট্যের প্রাপ্যতার জন্য আপনি কি কখনও নিজের সিএসএস-এ-বিবৃতিগুলি করতে চেয়েছিলেন? ঠিক আছে, মডার্নিজারের সাহায্যে আপনি এটি সম্পাদন করতে পারেন!

— Frozenskys
সূত্র

2

মডার্নিজারে আমরা যে পরীক্ষাটি ব্যবহার করি return !!document.createElement('canvas').getContext তা হ'ল : এটি অবশ্যই পরীক্ষার সেরা উপায়।

— পল আইরিশ

4

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

— ড্যানিয়েল ক্যাসিডি

5

try {
    document.createElement("canvas").getContext("2d");
    alert("HTML5 Canvas is supported in your browser.");
} catch (e) {
    alert("HTML5 Canvas is not supported in your browser.");
}

— শেখ আলী
সূত্র

1

এখানে একটি গোটচা থাকতে পারে- কিছু ক্লায়েন্ট সমস্ত ক্যানভাস পদ্ধতি সমর্থন করে না ।

var hascanvas= (function(){
    var dc= document.createElement('canvas');
    if(!dc.getContext) return 0;
    var c= dc.getContext('2d');
    return typeof c.fillText== 'function'? 2: 1;
})();

alert(hascanvas)

— kennebec
সূত্র

0

আপনার ব্রাউজারগুলি ক্যানভাস সমর্থন করে কিনা তা সনাক্ত করতে আপনি canisuse.js স্ক্রিপ্ট ব্যবহার করতে পারেন

caniuse.canvas()

— Beka
সূত্র

0

আপনি যদি আপনার ক্যানভাসের প্রসঙ্গটি পেতে চলেছেন তবে আপনি এটি পরীক্ষার হিসাবেও ব্যবহার করতে পারেন:

var canvas = document.getElementById('canvas');
var context = (canvas.getContext?canvas.getContext('2d'):undefined);
if(!!context){
  /*some code goes here, and you can use 'context', it is already defined*/
}else{
  /*oof, no canvas support :(*/
}

— কলম হাইনেস
সূত্র