生成GIF動畫的JS庫:gif.js
gif.js 是一個GIF編碼庫,可用于直接在中瀏覽器生成GIF圖片。使用typed arrays和web workers 在后臺渲染每一幀,它真的很快!
示例 - http://jnordberg.github.io/gif.js/
可工作在支持: Web Workers, File API 和 Typed Arrays的瀏覽器中。
經測試支持:
- Google Chrome
- Firefox 17
- Safari 6
- Internet Explorer 10
- Mobile Safari iOS 6
用法
Include gif.js found in dist/ in your page. Also make sure to have gif.worker.js in the same location.
var gif = new GIF({
workers: 2,
quality: 10
});
// add an image element
gif.addFrame(imageElement);
// or a canvas element
gif.addFrame(canvasElement, {delay: 200});
// or copy the pixels from a canvas context
gif.addFrame(ctx, {copy: true});
gif.on('finished', function(blob) {
window.open(URL.createObjectURL(blob));
});
gif.render(); 選項
Options can be passed to the constructor or using the setOptions method.
| Name | Default | Description |
|---|---|---|
| repeat | 0 |
repeat count, -1 = no repeat, 0 = forever |
| quality | 10 |
pixel sample interval, lower is better |
| workers | 2 |
number of web workers to spawn |
| workerScript | gif.worker.js |
url to load worker script from |
| background | #fff |
background color where source image is transparent |
| width | null |
output image width |
| height | null |
output image height |
| transparent | null |
transparent hex color, 0x00FF00 = green |
If width or height is null image size will be deteremined by first frame added.
addFrame options
| Name | Default | Description |
|---|---|---|
| delay | 500 |
frame delay |
| copy | false |
copy the pixel data |
本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!