यह पता लगाने का सबसे अच्छा तरीका है कि HTML5 <कैनवास> समर्थित नहीं है

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:। मैं गलत का मूल्यांकन करता हूं, लेकिन टाइपऑफ मैं "नंबर" देता हूं। टाइपोफ़ !! मैं "बूलियन" देता हूं।

— User 2

बूलियन को "कास्ट" करने का दूसरा तरीका है: undefined ? true : false(हालांकि थोड़ा अधिक लंबा)।

— vcapra1

1

मुझे ध्यान दिया जाना चाहिए कि विभिन्न प्रकार के कैनवास समर्थन हैं। प्रारंभिक ब्राउज़र कार्यान्वयन ने समर्थन नहीं किया toDataURL। और ओपेरा मिनी केवल मूल कैनवास रेंडरिंग का समर्थन करता है जिसमें कोई पाठ एपीआई समर्थन नहीं है । ओपेरा मिनी को इस तरह से बाहर रखा जा सकता है , सिर्फ क्रॉस संदर्भ के लिए।

— हेक्सालिस

103

ब्राउज़रों में कैनवास समर्थन का पता लगाने के दो लोकप्रिय तरीके हैं:

के अस्तित्व की जाँच के लिए मैट का सुझावgetContext , जिसका उपयोग मॉडर्निज़्र लाइब्रेरी द्वारा भी इसी तरह किया गया है:
```
var canvasSupported = !!document.createElement("canvas").getContext;
```
HTMLCanvasElementइंटरफ़ेस के अस्तित्व की जाँच करना , जैसा कि वेबआईडीएल और एचटीएमएल विनिर्देशों द्वारा परिभाषित किया गया है । IE 9 टीम से एक ब्लॉग पोस्ट में भी इस दृष्टिकोण की सिफारिश की गई थी ।
```
var canvasSupported = !!window.HTMLCanvasElement;
```

मेरी सिफारिश कई कारणों से उत्तरार्द्ध का एक रूपांतर है ( अतिरिक्त नोट्स देखें ):

कैनवास का समर्थन करने वाला प्रत्येक ज्ञात ब्राउज़र - IE 9 सहित - इस इंटरफ़ेस को लागू करता है;
यह अधिक संक्षिप्त है और तुरंत स्पष्ट है कि कोड क्या कर रहा है;
getContextदृष्टिकोण है काफी धीमी सभी ब्राउज़र में , क्योंकि यह एक HTML तत्व बनाने होते हैं। यह आदर्श नहीं है जब आपको जितना संभव हो उतना प्रदर्शन को निचोड़ने की आवश्यकता होती है (उदाहरण के लिए, माडर्निज़्र जैसे पुस्तकालय में)।

पहली विधि का उपयोग करने के लिए कोई ध्यान देने योग्य लाभ नहीं हैं। दोनों दृष्टिकोण खराब हो सकते हैं, लेकिन दुर्घटना से ऐसा होने की संभावना नहीं है।

अतिरिक्त नोट्स

यह अभी भी जांचना आवश्यक हो सकता है कि 2 डी संदर्भ को पुनर्प्राप्त किया जा सकता है। कथित तौर पर, कुछ मोबाइल ब्राउज़र उपरोक्त दोनों चेक के लिए सही हो सकते हैं, लेकिन वापस आ सकते nullहैं .getContext('2d')। यही कारण है कि Modernizr के परिणाम की जाँच भी करता है .getContext('2d')। हालाँकि, WebIDL और HTML - फिर - हमें एक और बेहतर, तेज विकल्प देता है:

var canvas2DSupported = !!window.CanvasRenderingContext2D;

ध्यान दें कि हम कैनवास तत्व के लिए पूरी तरह से जाँच को छोड़ सकते हैं और सीधे 2D रेंडरिंग समर्थन के लिए जाँच कर सकते हैं। CanvasRenderingContext2Dइंटरफ़ेस भी एचटीएमएल विनिर्देशन का हिस्सा है।

आपको WebGL समर्थन का पता लगाने के लिए दृष्टिकोण का उपयोग करना चाहिए , क्योंकि भले ही ब्राउज़र समर्थन कर सकता है , लेकिन यदि ड्राइवर समस्याओं के कारण GPU के साथ ब्राउज़र को इंटरफ़ेस करने में असमर्थ है और कोई सॉफ्टवेयर कार्यान्वयन नहीं है , तो वह अशक्त हो सकता है । इस मामले में, इंटरफ़ेस के लिए जाँच करने से पहले आप इसके लिए जाँच छोड़ सकते हैं :getContextWebGLRenderingContextgetContext()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% धीमा है।

— एंडी ई
स्रोत

10

नोकिया S60 और ब्लैकबेरी स्टॉर्म कुछ ऐसे उपकरणों में से एक हैं जो आपके प्रस्तावित 2 डी कैनवास के दोषों पर सकारात्मक प्रभाव डालेंगे। दुर्भाग्य से, मोबाइल बहुत बालों वाला हो जाता है और विक्रेता नियमों का पालन नहीं करते हैं। :( इसलिए हम सटीक परिणामों को सुनिश्चित करने के लिए और अधिक पूर्ण (यानी धीमे) परीक्षणों के साथ समाप्त होते हैं।

— पॉल आयरिश

@Paul: यह दिलचस्प है, मैंने ब्लैकबेरी स्टॉर्म एमुलेटर का परीक्षण किया, वे सभी falseआपके उदाहरण और मेरा दोनों के लिए वापस आ गए , ऐसा लगता है कि वे CanvasRenderingContext2Dइंटरफ़ेस प्रदान नहीं करते हैं । मैं अभी तक एस 60 का परीक्षण करने में असमर्थ रहा हूं, मैं अभी भी बहुत उत्सुक हूं और इतनी जल्दी कर सकता हूं, हालांकि।

— एंडी ई।

1

यह दिलचस्प है, लेकिन जब तक परीक्षण एक सौ या इतने मिली के तहत नहीं आता है, तब तक यह ठीक नहीं है? मुझे लगता है कि वे वैसे भी बहुत तेजी से कर रहे हैं। यदि आप एक फ़ंक्शन को याद करते हैं जो इसके लिए परीक्षण करता है तो आपको केवल एक बार लागत का भुगतान करने की आवश्यकता है।

— ड्रू नोक

1

मैंने आपका बेंचमार्क चलाया और यहां तक कि 'धीमी' अप्रोच को ~ 800,000 बार एक सेकंड में किया जा सकता है। फिर से, यदि परिणाम समाप्त हो गया है, तो निर्णय का उपयोग करने के लिए दृष्टिकोण किस मजबूती पर आधारित होना चाहिए, प्रदर्शन नहीं (यह मानते हुए कि मजबूती में अंतर है।)

— ड्रू नोक

@DrewNoakes: हाँ, आपको गति पर संगतता के लिए लगभग हमेशा जाना चाहिए। मेरी दलील यह है कि मैं पॉल द्वारा अनुकूलता के दावों का खंडन कर रहा हूं, कम से कम एक समस्या के अपने परीक्षण के आधार पर जो उन्होंने अपनी टिप्पणी में उल्लेख किया है। मैं अन्य ब्राउज़र का परीक्षण करने में असमर्थ रहा हूँ, लेकिन मैं इस बात पर अडिग हूं कि कोई समस्या है। आपको हमेशा अनुकूलता का त्याग किए बिना सर्वश्रेष्ठ प्रदर्शन प्राप्त करने का लक्ष्य रखना चाहिए। मैं माइक्रो-ऑप्टिमाइज़िंग के बारे में बात नहीं कर रहा हूं, लेकिन अगर आप सैकड़ों परीक्षण चला रहे हैं और वे सभी को अन-अनइंस्टॉल कर रहे हैं, तो हां, इससे फर्क पड़ सकता है।

— एंडी ई

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

@brainjam - नहीं, मैं कोड के अंत के पास उस चर का उपयोग करता हूं। मैं JSLint 'सिफारिशों' (इस मामले में .. varप्रति फ़ंक्शन केवल 1 कथन) का पालन करने का प्रयास करता हूं ।

— मैट

6

क्यों आधुनिकता की कोशिश नहीं की ? यह एक JS लाइब्रेरी है जो डिटेक्शन क्षमता प्रदान करती है।

उद्धरण:

क्या आपने कभी सीमा-त्रिज्या जैसी शांत सुविधाओं की उपलब्धता के लिए अपने सीएसएस में बयान करना चाहा है? खैर, Modernizr के साथ आप बस इतना ही पूरा कर सकते हैं!

— 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()

— बेका
स्रोत

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 :(*/
}

— कैलम हाइन्स
स्रोत