(go) Let the browser support WEBP

Source: Internet
Author: User
Tags 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.