Security News
How Threat Actors are Abusing GitHub’s File Upload Feature to Host Malware
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
webp-hero
Advanced tools
Changelog
v0.0.2 — 2022-02-17
non-breaking changes:
useCanvasElements
is now auto-detected via the newly available detectCanvasReadingSupport
functionwebpSupport
no longer has to be a promise, it can just be a boolean (or a promised boolean)Readme
npm install webp-hero
libwebp
decoder in the browser (converts webp images to png on-the-fly){useCanvasElements: true}
)98 KB
<picture>
elements.webp
extensionoption A — html install, use webp-hero's bundle with the polyfills
you just inject the html onto your page. this technique works nicely for older browsers like ie11
load generic polyfills and the webp-hero global bundle via script tags
<script src="https://unpkg.com/webp-hero@0.0.1/dist-cjs/polyfills.js"></script>
<script src="https://unpkg.com/webp-hero@0.0.1/dist-cjs/webp-hero.bundle.js"></script>
run the webp-hero polyfill function on the document
<script>
var webpMachine = new webpHero.WebpMachine()
webpMachine.polyfillDocument()
</script>
option B — commonjs install, use webp-hero's cjs modules in your application
you'll be familiar with this if you're bundling a commonjs with browserify or webpack
install the webp-hero npm package
npm install webp-hero
import and run the webp-hero polyfill function
import {WebpMachine} from "webp-hero"
const webpMachine = new WebpMachine()
webpMachine.polyfillDocument()
if you want to support old browsers like ie11,
you might want to include your own polyfills or import webp-hero/dist-cjs/polyfills.js
option C — es-module install, like in the future
es modules are available. but why would anybody use these for webp-hero? i guess it could be useful for.. mobile safari? anyways, this won't work in older browsers, which might defeat the purpose of using webp-hero in the first place? well.. it's here for you if you need it!
use webp-hero on your page in one script tag
<script type="module">
import {WebpMachine} from "https://unpkg.com/webp-hero@0.0.1/dist/webp-machine.js"
const webpMachine = new WebpMachine()
webpMachine.polyfillDocument()
</script>
option D — angular users should look at ngx-webp-polyfill
new WebpMachine({...options})
— all options have defaults, but you can override them
{webp}
google module which contains the actual decoder{webpSupport}
function which detects whether the browser supports webp{detectWebpImage}
detect whether or not the provided <img>
element is in webp format{useCanvasElements: true}
boolean which when true causes webp-hero to polyfill webp images by wholly replacing them with canvas elements (instead of using png data urls). this helps compatibility with icecat (default: false)webpMachine.polyfillDocument()
— run over the entire html document, sniffing out webp <img>
elements to convert (only if the browser doesn't support webp)webpMachine.polyfillImage(imageElement)
— converts the given webp image (only if the browser doesn't support webp)webpMachine.decode(webpData)
— decode webp Uint8Array
data, return a png data-urlwebpMachine.clearCache()
— manually wipe the cache to save memoryconvert-binary-data.ts
and etc may be unstable, you might not want to rely on thosewebp-hero/libwebp/google/webp.js
webp-hero/libwebp/webp.cjs.js
webp-hero/libwebp/webp.js
prerequisites
webp-hero development
npm install
— install dependencies and run build
webp-hero/dist/
and webp-hero/dist-cjs/
npm start
— start http server
rebuild google's libwebp
libwebp/dist
are checked into git, because it takes so damn long to buildlibwebp/build
— run dockerized libwebp build, regenerates libwebp/dist
libwebp/debug
— handy for debugging the dockerized buildFAQs
webp image format polyfill for browsers
The npm package webp-hero receives a total of 6,570 weekly downloads. As such, webp-hero popularity was classified as popular.
We found that webp-hero demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.