(go) Let the browser support WEBP

Reprinted from: 1190000005898538?utm_source=tuicool&utm_medium=referral

Conversion ToolsSmart Map Isparta determine browser support WEBP

Method One:

function checkwebp () {    try{        return (document.createelement (' canvas '). Todataurl (' Image/webp '). IndexOf (' data:image/webp ') = = 0);    } Catch (Err) {        return  false;    }} Console.log (CHECKWEBP ());    // true or False

Console.log (CHECKWEBP ()); True or False
The method was seen elsewhere, and I rewrote it with Trycatch.

Principle:

The Htmlcanvaselement.todataurl () method returns a data URI containing a representation of the image in the format specifi ed by the type parameter (defaults to PNG). The returned image is in a resolution of $ DPI.

If the height or width of the canvas is 0, the string "Data:," is returned.
If The requested type is not image/png and the returned value starts with Data:image/png and then the requested type is not Supported.
Chrome supports IMAGE/WEBP.
Method Two:

varD =document;varCheck =function() {    varSUPPORTWEBP; Try {        varEle = d.createelement (' object ')); Ele.type= ' IMAGE/WEBP '; Ele.innerhtml= '! ';        D.body.appendchild (ele); //wonderfully, if the browser supports WEBP, then this object is not visible (offsetwidth is 0),        //otherwise it will show up with a visible width.SUPPORTWEBP =!Ele.offsetwidth;    D.body.removechild (ele); }Catch(Err) {SUPPORTWEBP=false; }    returnSUPPORTWEBP;}

1. If the use scenario is a browser, you can:
JavaScript capability detection, output WebP images for WebP-enabled users
Using the WebP support plugin: Webpjs

2. If the use scenario is an APP, you can:
Android 4.0 below WebP Parsing Library (link)
IOS WebP Parsing library (link)

(go) Let the browser support WEBP