Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/googlearchive/offthread-image
A helper library to decode images off main thread using createImageBitmap.
https://github.com/googlearchive/offthread-image
Last synced: 3 months ago
JSON representation
A helper library to decode images off main thread using createImageBitmap.
- Host: GitHub
- URL: https://github.com/googlearchive/offthread-image
- Owner: googlearchive
- License: apache-2.0
- Archived: true
- Created: 2016-01-22T19:47:48.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-01-25T16:34:17.000Z (almost 8 years ago)
- Last Synced: 2024-04-15T02:53:42.274Z (7 months ago)
- Language: JavaScript
- Size: 474 KB
- Stars: 197
- Watchers: 14
- Forks: 23
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Offthread Image
A helper library that decodes images off-main thread using `createImageBitmap`
in a worker, and then transfers them back to the main thread and draws them into
a canvas.
**Status: 0.1.0-alpha**
## I would like to see it now, please!
Of course. Firstly you will need Chrome Canary, and you should switch on **"Enable experimental canvas features"** in about:flags. Then head to the test page.
## Docs & Usage
If you want to create a single off-thread image, you can do so by instantiating
it as a wrapper around an existing element.
```javascript
let target = document.querySelector('.offthread-img');
let img = new OffthreadImage(target);
target.addEventListener('decoded', function () {
// The image has been decoded... remove the spinner.
target.classList.remove('spinner');
});
img.src = 'cat.png';
```
The element itself would look something like this:
```html
```
However you can also add the `src` attribute to the element if you prefer:
```html
```
And now you no longer need to set the `src` in your JavaScript as the library will pick it up.
### Other attributes
In addition to setting `src` you can also set `width` and `height` attributes,
much as you would do with an `![]()
` element.
Both `width` and `height` attributes are optional. If only one is provided, the
other is calculated based on the one provided, and the image will be drawn in
proportion. If both are provided they will be used as-is, which may cause distortion.
```html
```
### Creating multiple OffthreadImages
`OffthreadImage` also provides a factory method to bootstrap many images at once. This is done by calling `createFromSelector()`:
```javascript
OffthreadImage.createFromSelector();
```
You don't need to provide a selector (it defaults to `'.offthread-img'`), but
you can pass one if you want to.
### Background Images
If you want to use an OffthreadImage as a background image, you can do that, too. Instead of setting `src` use `bg-src` instead. The canvas will then be sized to the parent element exactly:
```html
```
If you use a background image, the styles of the target element will be inspected for the `background-size` style, though only `cover` and `contain` are supported right now:
```css
.bg {
width: 400px;
height: 320px;
background-size: cover;
}
```
Finally, if you want to read through the API, you can check out the docs.
## Support & Issues
The library depends on `createImageBitmap`, which is behind a flag in Chrome (`--enable-experimental-canvas-features`, or "Enable experimental canvas features" in chrome://flags).
Support is therefore currently for:
* Chrome 50+.
* Firefox 42+.
For other browsers there is no fallback provided, but there is an issue filed to do that.
There are other todos and missing features:
* Support `background-size` more completely.
* Support `background-position` more completely.
* Support `background-repeat`.
License: Apache 2.0 - See [/LICENSE](/LICENSE).
Author: paullewis.
Please note: this is not an official Google product.