(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

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.